跨域问题---前端解决方案

跨域问题—前端解决方案（简洁版）

** 跨域：违背了同源策略（请求头 / 域名 / 端口号不一致）**

常见业务场景

1、本地环境：前后端ip端口号不一致
2、线上环境：api请求其它网址内容

场景1解决方案：

1、nginx反向代理
1、打开目录：/usr/local/nginx/conf/nginx.conf
2、修改配置：
server: {
listen 80;
server_name 127.0.0.1;
location / { // 当检测到 / 请求时，就会请求代理地址
proxy_pass http://127.0.0.1:8080; //这里是代理（目标）服务器地址
}
}
3、刷新并重启
nginx -t
nginx -s reload

2、vue 配置跨域
1、找到并打开vue.config.js
2、修改配置：
proxyTable: { // 配置跨域
‘/api’:{ //拦截/api 开头的请求
target:http://xxx.xxx.xxx, // 目标地址
changeOrigin:true, // 允许跨域
pathRewrite:{
‘^/api’ : ‘’ // 去掉api
}
}
3、修改request.js 的请求地址为 /api。

场景2解决方案：

线上的跨域一般都是后台进行配置，添加请求头，就不会存在跨域的情况；
但是如果请求其它网站api，例如线上环境访问本地环境，就会有问题；
浏览器中chrome会就行拦截，像火狐、Edge、QQ浏览器都不会拦截；

1、针对线上chrome跨域拦截
1、浏览器地址栏输入：chrome://flags/#block-insecure-private-network-requests
2、找到Block insecure private network requests. 选择Enabled。

2、通过反向代理的方式
1、打开目录：/usr/local/nginx/conf/nginx.conf
2、修改配置：
server: {
listen 80;
server_name 127.0.0.1;
root /data/wwwroot/项目名称/dist //项目代码目录
index index.html index.php // 启动文件
location /api { // 当检测到 / 请求时，就会请求代理地址
proxy_pass http://127.0.0.1:8080; //这里是代理（目标）服务器地址
}
}
3、刷新并重启
nginx -t
nginx -s reload

4、修改request.js 的请求地址为 /api。

*************end