Jun
1
vuejs接口跨域处理大全
tommyhu , 14:35 , 大前端 » vue.js , Comments(0) , Trackbacks(0) , Reads(400) , Via Original
Large | Medium | Small


1、vue proxyTable接口跨域请求调试
或参考开发阶段 API 请求代理
在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子:
服务器提供的接口如果长这样https://www.exaple.com/server_new/login,我们把域名提取出来如https://www.exaple.com;
在config中新建一个文件命名为proxyConfig.js :
config文件夹下的index.js引入proxyConfig.js:
重启项目npm run dev:
你会发现出现了这个
这个时候我们已经设置好了本地API代理了
修改本地hosts文件
文件路径一般是C:\Window\System32\drivers\etc,打开hosts文件,在这一段下面把localhost设置进去
localhost www.exaple.com
搞定
此时我们已经完全解决了跨域问题,以及本地测试后台无法向我们本地环境设置cookie的情况了。
2、后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com
后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com
前端post请求设置withCredentials=true
这里用了axios的请求数据方法代码如下:
jQuery的$.ajax::
3、jsonp
jsonp也是一种解决跨域的方法,不过我从来没有用过,在网上查了下资料,jsonp的原理是script标签引入js是不受域名限制的, 由于是模拟插入script标签, 所以不可以用post请求。
4、nginx配置
最近使用vue开发一个功能,npm run build之后打包的代码放在了a.com.cn下但是php接口部署在了b.com下,那么问题来了,如何让后端接口支持跨域。有两种方法:
让后端在返回数据的时候设置下返回请求的header,这种方法比较不稳定,因为接口一旦多了就得改好多代码,而且每次出了问题还得去找后端开发改代码,很烦。
另一种方法是,自己配置nginx,首先ssh登录到部署接口所在的服务器,修改nginx配置,在http对象中加入两行代码:
改完重启下nginx,然后在vue项目中,在导入axios的地方加如以下代码:
然后测试,发现就可以跨域了。
▲返回顶部
Last modified by tommyhu on2018/06/01 14:39
或参考开发阶段 API 请求代理
在vue-cli项目中的config文件夹下的index.js配置文件中,dev长这样子:
服务器提供的接口如果长这样https://www.exaple.com/server_new/login,我们把域名提取出来如https://www.exaple.com;
在config中新建一个文件命名为proxyConfig.js :
config文件夹下的index.js引入proxyConfig.js:
重启项目npm run dev:
你会发现出现了这个
这个时候我们已经设置好了本地API代理了
修改本地hosts文件
文件路径一般是C:\Window\System32\drivers\etc,打开hosts文件,在这一段下面把localhost设置进去
localhost www.exaple.com
搞定
此时我们已经完全解决了跨域问题,以及本地测试后台无法向我们本地环境设置cookie的情况了。
2、后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com
后端设置请求头部Access-Control-Allow-Credentials: true和Access-Control-Allow-Origin: www.xxx.com
前端post请求设置withCredentials=true
这里用了axios的请求数据方法代码如下:
jQuery的$.ajax::
3、jsonp
jsonp也是一种解决跨域的方法,不过我从来没有用过,在网上查了下资料,jsonp的原理是script标签引入js是不受域名限制的, 由于是模拟插入script标签, 所以不可以用post请求。
4、nginx配置
最近使用vue开发一个功能,npm run build之后打包的代码放在了a.com.cn下但是php接口部署在了b.com下,那么问题来了,如何让后端接口支持跨域。有两种方法:
让后端在返回数据的时候设置下返回请求的header,这种方法比较不稳定,因为接口一旦多了就得改好多代码,而且每次出了问题还得去找后端开发改代码,很烦。
另一种方法是,自己配置nginx,首先ssh登录到部署接口所在的服务器,修改nginx配置,在http对象中加入两行代码:
改完重启下nginx,然后在vue项目中,在导入axios的地方加如以下代码:
然后测试,发现就可以跨域了。
▲返回顶部
Last modified by tommyhu on2018/06/01 14:39
