跨域问题是前后端分离应用常见问题,解决的方案有很多,从开发阶段到上线后的生产环境 均需要解决该问题,
方案一:JSONP
- 这个比较常见,但仅适用于GET请求。
jsonp原理:jsonp,即json+padding,动态创建script标签,利用script标签的src属性可以获取任何域下的js脚本,通过这个特性(也可以说漏洞),服 务器端不在返货json格式,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域.
方案二、apache反向代理
- 网上资料太多,自行查找。
方案三、nginx方向代理
一、下载
建议选择稳定版本
二、安装运行
1、将下载的nginx 解压放置在一个没有中文的路径下(这点很重要)
2、修改 conf/nginx.conf 中的端口号,设置listen 8888,避免与其他服务端口冲突。
3、双击nginx.exe (可能直接闪退),或者cd到安装路径,输入nginx
4、打开浏览器输入http://localhost:8888/ 查看服务是否成功运行
三、反向代理配置
https://www.cnblogs.com/anruy/p/4989161.html
https://www.cnblogs.com/Miss-mickey/p/6734831.html
https://www.cnblogs.com/xingzc/p/5753030.html
方案四、前后端分离
五、webpack代理设置
- 如下设置,附带cookie丢失问题,如果每次请求会重新携带不同的cookie时可以用到。
webpack proxyTable
var sessionId = ''
module.exports = {
// add by yixuanz 代理设置 2017-12-20 14:00:49
proxyTable: {
'/api': {
target: 'http://88.88.88:110/controller',
changeOrigin: true,
pathRewrite: {
'^/api': ''
},
// 解决登录后,cookie丢失。 start
// PS: 正常情况无需设置以下代码,若出现接口无法获取请求头部的cookie则可参考
cookieDomainRewrite: 'localhost',
onProxyReq: function (proxyReq, req, res) {
proxyReq.setHeader('Cookie', sessionId)
},
onProxyRes: function (proxyRes, req, res) {
let existingCookies = proxyRes.headers['set-cookie'],
rewrittenCookies = []
if (existingCookies !== undefined) {
if (!Array.isArray(existingCookies)) {
existingCookies = [existingCookies]
}
for (let i = 0; i < existingCookies.length; i++) {
rewrittenCookies.push(existingCookies[i].replace(/;\s*?(Secure)/i, ''))
}
sessionId = rewrittenCookies[rewrittenCookies.length - 1]
proxyRes.headers['set-cookie'] = rewrittenCookies
}
}
}
},
...
// 解决登录后,cookie丢失。 end
}