2020-05-22|2020-05-22 Vue跨域请求怎么做(vue-cli 3.0) 2020-05-22Vue跨域请求怎么做(vu

现在公司基本都是前后端分离为主，使用 Vue 搭建的项目在本地与调用后端提供的 api 时，因为是使用 node 运行服务器，IP与后端不一致，所以会产生跨域问题。耳熟能详的跨域手段一般是JSONP，CORS什么的，而 Vue 已经帮我们配置好了，只需在 vue.config.js 设置一下就行了
注：vue-cli 版本是2.0左右的会有 webpack 的 config 目录，
而 vue-cli 版本是3.0左右的则没有 config 目录，取而代之的是 vue.config.js
Vue 跨域原理：
浏览器是禁止跨域的，但是服务端不禁止，在本地运行 yarn serve 等命令时实际上是用 node 运行了一个服务器，因此 proxy 实际上是浏览器将请求发给自己的服务端，再由自己的服务端转发给要跨域的服务端，做了一层代理，因为不会出现跨域问题。
（ vue-cli的proxyTable用的是http-proxy-middleware中间件
create-react-app用的是webpack-dev-server内部也是用的http-proxy-middleware
http-proxy-middleware内部用的http-proxy）
vue.config.js的配置：

module.exports = { devServer: { open: true, host: "localhost", port: 8080, https: false, //以上的ip和端口是我们本机的; 下面为需要跨域的 proxy: { //配置跨域 "/api": { target: "https://p.3.cn/prices/mgets?skuIds=J_100008348542&type=1", //这里应该填写你们真实的后台接口 ws: true, changOrigin: true, //允许跨域 pathRewrite: { "^/api": "", //请求的时候使用这个api就可以 }, }, }, }, };

在组件里用 axios 发起请求：

sendCOReq() { this.$axios.get("/api").then(res => { console.log(res); }); }

2020-05-22|2020-05-22 Vue跨域请求怎么做(vue-cli 3.0)

文章图片
获取到的数据 6.16更新
vue.config.js 里的 pathRewrite作用是什么？
用代理得有一个标识，告诉node你这个请求要用代理。不然, 你的 html, css, js这些静态资源请求都会走代理，这显然是不对的。

proxy: { //配置跨域 "/useclient": { target: "https://p.3.cn/prices/mgets", //这里后台的地址模拟的; 应该填写你们真实的后台接口 ws: true, changOrigin: true, //允许跨域 pathRewrite: { "^/useclient": "", //请求的时候使用这个useclient就可以 }, }, "/useclient2": { target: "https://p.3.cn/prices/mgets", //这里后台的地址模拟的; 应该填写你们真实的后台接口 ws: true, changOrigin: true, //允许跨域 pathRewrite: { "^/useclient2": "", //请求的时候使用这个useclient2就可以 }, }, },sendCOReq() { this.$axios.get("/useclient?skuIds=J_100008348542&type=1").then(res => { console.log(res); }); }

"/useclient"：
这个就是上文所说的标识，接口只要是'/useclient'开头的才用代理，所以你的接口就要这么写 /useclient/xx/xx。最后代理的请求路径就是 http://xxx.xx.com/useclient/xx/xx
pathRewrite: {"^/useclient": "", }
然而正确的接口路径里面是没有/useclient的，所以就用到 pathRewrite,用''^/useclient'':'', 把最终请求路径中'/useclient'去掉，这样既能有正确标识，又能在请求接口的时候去掉
【2020-05-22|2020-05-22 Vue跨域请求怎么做(vue-cli 3.0)】这个标识还可以复数配置（比如我配置多了一个/useclient2）