前端在生产环境跨域
一,开发环境跨域
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 function httpRequest(paramObj, fun, errFun) { var xmlhttp = null /* 创建XMLHttpRequest对象, *老版本的 Internet Explorer(IE5 和 IE6)使用 ActiveX 对象:new ActiveXObject("Microsoft.XMLHTTP") * */ if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest() } 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 in paramData) { 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'
使用: