摘要：
api是我们前端代理的那个api。proxy_pass后面就是跨域地址我在网上找到很多配置很全的nginx.config,有疑问还可以搜搜。
前端在生产环境跨域
一，开发环境跨域
1.配置代理
如果使用vue-cli搭建的项目，可以直接使用proxyTable模块，项目框架已经集成
在config -> index.js 页面配置proxyTable，如下：
proxyTable: { '/api':{ //开发坏境下：target 里的地址是你跨域请求的地址 target:'http://baidu.com', changeOrigin:true， pathRewrite:{ '^/api':'' //代表上面的地址，在别的页面用api代替 } }， //若是存在多个跨域问题，可代理多个 '/bili':{ target:'http://bilibili.com', changeOrigin:true, pathRewrite:{ '^/bili':''} } }
显然，大部分情况我们不可能为每个api接口都在这加一个规则，所以更好的配置是：
proxyTable: { '**': { target: 'http://127.0.0.1:3000', changeOrigin: true, //允许跨域 } } 或者 proxyTable: [{ context: ['/**']， target: 'http://127.0.0.1:3000'， changeOrigin: true, //允许跨域 }]
2. 使用this.axios的配置
使用axios需要安装并配置全局（安装不说了）
axios配main.js:
3.在需要的页面使用
//api 就是在config-index中代理的api，后面是具体的接口和参数 this.$axios.post(‘api/update’, { param: paramdata }).then(res => {...})
4.在浏览器 network 中查看
前面是本地项目的地址，后面跟的api就是代理地址，实现跨域
二，后端处理 CORSFilter
1.完全交予后端解决，配值请求头信息（core）
response.setHeader("Access-Control-Allow-Origin", "*");//* or origin as u prefer
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "PUT, POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "content-type, authorization");若是后端可以处理的话，前端就可以放手“高枕无忧”了，开发环境生产环境都OK，具体使用后端小伙伴应该都懂，OK啦
三，生产环境跨域
配置nginx代理
使用nginx反向代理，在配置文件nginx.conf中找到server{}对象，更改项目地址root和配置代理地址proxy_pass，这个方法适合前端静态文件使用：
location /{ root D:/browseClient/dist; #自己的前端项目地址 index index.html index.htm; } #解决跨域 location /api { # 自定义nginx接口前缀 proxy_pass http://127.0.0.1:3000; # 后台api接口地址 proxy_redirect default; #设置主机头和客户端真实地址，以便服务器获取客户端真实IP proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; }
location是线上地址。
api是 我们前端代理的 那个api。
proxy_pass 后面就是跨域地址
我在网上找到很多配置很全的nginx.config,有疑问还可以搜搜。
四，前端用原生ajax处理跨域
不用后端了！！！
代码如下，公用部分：
export functionhttpRequest(paramObj, fun, errFun) { var xmlhttp = null /*创建XMLHttpRequest对象， *老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：new ActiveXObject("Microsoft.XMLHTTP") * */ if(window.XMLHttpRequest) { xmlhttp = newXMLHttpRequest() } else if(window.ActiveXObject) { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP') } /*判断是否支持请求*/ if (xmlhttp == null) { alert('你的浏览器不支持XMLHttp') return} /*请求方式，并且转换为大写*/ var httpType = (paramObj.type || 'GET').toUpperCase() /*数据类型*/ //var dataType = paramObj.dataType || 'json' /*请求接口*/ var httpUrl = paramObj.httpUrl || '' /*是否异步请求*/ var async = paramObj.async || true /*请求参数--post请求参数格式为：foo=bar&lorem=ipsum*/ var paramData = paramObj.data ||[] var requestData = '' for (var name inparamData) { requestData += name + '=' + paramData[name] + '&'} requestData = requestData === '' ? '' : requestData.substring(0, requestData.length - 1) console.log(requestData) /*请求接收*/xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { /*成功回调函数*/fun(xmlhttp.responseText) } else{ /*失败回调函数*/errFun } } /*接口连接，先判断连接类型是post还是get*/ if (httpType === 'GET') { xmlhttp.open('GET', httpUrl, async) xmlhttp.send(null) } else if (httpType === 'POST') { xmlhttp.open('POST', httpUrl, async) //发送合适的请求头信息 xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded') xmlhttp.send(requestData) } }
在需要处理的页面引入这个公共方法：
import { httpRequest } from '@/utils/index'使用：
转载于：https://blog.csdn.net/qq_41612675/article/details/98745112