vue反向代理解决跨域及部署nginx端口转发解决跨域

1. 前言

本文是为了解决vue反向代理解决跨域及部署服务器nginx端口转发解决跨域，因为踩了不少的坑，百度了很多，也试了太多的方法，最终得以解决，所以记录一下，希望遇到同样问题的友友们可以高效的解决自己项目中遇到的问题。

2.为什么会出现跨域问题

出于浏览器的同源策略限制，同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同协议（protocol）、主机（host）和端口号（port）

3.什么是跨域

当前url请求另一个url时，协议、域名、端口号三者之间任意一个与当前url不同则视为跨域

当前url	被请求url	是否跨域	原因
http://www.test.com	http://www.test.com/test.html	否	同源（协议、域名、端口号相同）
http://www.test.com	https://www.test.com	是	协议不同（前http 后https）
http://www.test.com	https://www.baidu.com	是	主域名不同（前test后baidu）
http://www.test.com	https://blog.test.com	是	主机名不同（前www后blog）
http://www.test.com:80	https://www.test.com:8369	是	端口号不同（前80后8369）

4. 非同源策略限制

无法读取非同源网页的Cookie、LocalStorage和IndexDB
无法接触非同源的DOM
无法向非同源地址发送AJAX请求

5. vue+axios请求接口跨域解决方案

vue开发环境下，使用反向代理解决跨域，本人使用的是vue-cli3 所以生成的项目中没有config文件，我们直接可以在项目的根目录上创建vue.config.js配置文件即可，具体实现如下


modules.exports={devServer:{proxy:{'/test':{target:"http://apis.juhe.cn/idioms/query",//后台接口地址（你想要获取数据的接口地址）changOrigin:true, //允许跨域pathRewrite:{'^/test':'',                // 请求时会多出来/test这个路径，但是我们不需要，通过重写去掉// 当我们请求/test地址时，地址会被解析为http://apis.juhe.cn/test// 设置pathRewrite时，地址会被解析为http://apis.juhe.cn}}}}
}

6. 反向代理解决跨域的原理

本地url	http://localhost:8080
被请求url	http://apis.juhe.cn

化解跨域原理图：

如果直接去请求只有一个是相同的，肯定跨域
在这里将http://localhost:8080的这个域名转换为http://apis.juhe.cn，然后再将请求发送到服务器，这样在服务器端到服务器，这样在服务器端收到的请求就是使用http://apis.juhe.cn;同理，当服务器返回数据的时候，也是先到代理的中间层，将http://apis.juhe.cn转换成http://localhost:8080,这样在客户端也是在同源下访问了。

7. 将项目部署到nginx服务器

以上内容解决完成之后，我们将项目部署到nginx服务器，这时候属于生产模式了，同时我们需要在vue项目中的main.js中配置默认访问的ip，设置下面代码之后，我们就可以直接用npm run build打包，发布部署了。

import axios from "axios"
if(process.env.NODE_ENV==="production"){axios.defaults.baseURL = "你的服务器ip"  //生产模式 不同于 开发时
}

8. 部署之后项目这时又出现跨域问题

我们需要修改nginx的配置文件，我的nginx为默认的。服务器用的系统是centos的，nginx.conf文件在这个目录下 /usr/local/nginx/conf/nginx.conf,用vim 修改，具体服务器系统是什么的按照相应操作就可，具体如下：

vim /usr/local/nginx/conf/nginx.conf

nginx.conf内容:

server{listen 80;                            #监听端口server_name localhost;             #服务器ip地址location / {                    #访问上面服务器ip地址时，出现的项目root   html;              #根目录为htmlindex  index.html index.htm;#默认访问的文件}location /test{                       #访问服务器ip/test时，我们实际访问的是下面代理的urlproxy_pass  http://apis.juhe.cn/idioms/query; #代理设置，我们想要请求的真实接口url}
}

我的项目地址是在http://localhost下，我的后台api接口在http://apis.juhe.cn/idioms/query?请求参数下，显然如果访问就是跨域。这时候，我们通过监听80端口，设置代理当访问/test时，将转发给我的代理去访问。即实现跨域ngnix端口转发实现跨域请求。

9. 总结

vue反向代理以及部署项目到nginx解决跨域的内容讲到这里了，希望可以帮助到大家，大家如果在项目中遇到类似问题了，可以参考一下，是否和我的问题一样。文章内容，有些是摘自于互联网，整理得来的。不忘大佬们的幸苦成果。如有侵权，联系我删除即可。

vue反向代理解决跨域及部署nginx端口转发解决跨域相关推荐

docker部署nginx 并实现反向代理配置多个域名多个端口
文章目录 docker部署nginx 并实现反向代理配置多个域名多个端口 1. 安装nginx: 2. 以终端的方式打开镜像容器 default.conf: nginx.conf: 3. 在linu ...
红蓝对抗之隧道技术第一篇（内网穿透、端口映射端口转发、Netsh端口转发、CS正反向连接多层内网、Burp设置上游代理访问内网、MSF protfwd端口转发/重定向）
文章目录隧道应用端口映射&端口转发 Netsh端口转发 Netsh端口转发meterpreter CS正向连接多层内网 CS反向连接多层内网 Burp设置上游代理访问内网 MSF prot ...
mac os 10.10以上的开启端口转发-解决mac默认不开启1024以下端口权限问题
mac os 10.10以上的开启端口转发-解决mac默认不开启102以上端口权限问题本人 10.10.2的mac os,tomcat想要在80端口上启动,网上查了N多资料都不行,只有这个方案可行: ...
cloudreve使用nginx反向代理时上传卡死或速度慢的解决办法
打开宝塔控制面板,选择"网站" 选中网站名并点击选择左侧"反向代理" 点击"配置文件".注意:此反向代理的"目标url" ...
Nginx代理服务器转发解决跨服务器访问
前言老样子,先来讲讲我所遇到的问题,大概是需要外网访问一个内网服务器,想通过这台内网服务器访问到到另外一台内网服务器(两台内网服务器互通),可以说是跨服务器访问.咨询过大佬后自己在总 ...
apache 反向代理_反向代理？听起来有点东西 ——Nginx学习笔记
反向代理是个什么东西? 外部网络用户向内部服务器发出请求,并将这些请求转发给内部网络上的服务器,然后将从内部服务器上得到的响应返回给Internet上请求连接的客户:执行反向代理服务的服务器称为反向代 ...
Linux下使用Nginx端口转发出现502错误的一种解决办法
今天圈里的一个朋友在配置完nfinx80端口转发到5000后,发现一个问题问题描述: 正确配置了Nginx80端口转5000端口,在CentOS上把.Net core WebAPI站点上传到cent ...
ssh 反向代理连接内网服务器并配置开机自启动(解决autossh无法开机自启动)
Q:现有公网服务器A和内网服务器B,如何通过ssh连接B呢 A: 安装autossh 配置B免密登录A,弄了之后B运行ssh root@123.123.123.123,以便将A加入到B的know_ho ...
Nginx端口占用解决方法
nginx启动发现端口被占用 nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use) 解决方法: 1.安装ipt ...

vue反向代理解决跨域及部署nginx端口转发解决跨域

1. 前言

2.为什么会出现跨域问题

3.什么是跨域

4. 非同源策略限制

5. vue+axios请求接口跨域解决方案

6. 反向代理解决跨域的原理

7. 将项目部署到nginx服务器

8. 部署之后项目这时又出现跨域问题

9. 总结

vue反向代理解决跨域及部署nginx端口转发解决跨域相关推荐

最新文章

热门文章