vue解决跨域方法 vue.js前端

1.什么是跨域跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域。
举例:

当前页面url被请求页面url是否跨域原因 http://www.test.com/http://www.test.com/index.html否同源（协议、域名、端口号相同） http://www.test.com/https://www.test.com/index.html跨域协议不同（http/https） http://www.test.com/http://www.baidu.com/跨域主域名不同（test/baidu） http://www.test.com/http://blog.test.com/跨域子域名不同（www/blog） http://www.test.com:8080/http://www.test.com:7001/跨域端口号不同（8080/7001）

2.跨域解决方法使用proxy代理: 首先创建一个 vue.config.js文件

module.exports = { publicPath: './', outputDir: 'dist', assetsDir: 'static', lintOnSave: process.env.NODE_ENV === 'development', productionSourceMap: false, devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, // 代理跨域的配置 proxy: { // 当我们的本地的请求有/api的时候，就会代理我们的请求地址向另外一个服务器发出请求 // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制 // localhost:8888/api/abc=> 代理给另一个服务器 '/api': { target: 'www.baidu.com', // 跨域请求的地址 changeOrigin: true, // 只有这个值为true的情况下才表示开启跨域 secure: false, // 如果是https接口，需要配置这个参数 // 路径重写 pathRewrite: { // 重新路由localhost:8888/api/login=> www.baidu.com/api/login '^/api': '' // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做 } } } } } // 注意：修改了配置文件后一定要重启才会生效

3.小结： ? 代理跨域的主要方式是利用服务器请求服务器的方式避过跨域问题来实现的.大概的流程: 浏览器===>代理服务器===>目标服务器.
【vue解决跨域方法】若有不懂的地方，请加q群147936127交流，谢谢~