推荐Vue解决跨域问题比较实用的2种方法

2022-07-07 10:31:24 阅读：180 来源： 互联网

首先我们必须要了解在什么情况下会出现跨域问题，即：当前页面的所在的源去请求另一个源的数据导致被提供接口的服务器拒绝
解决跨域的方式方法有很多种，例如script标签、jsonp、cors跨域资源共享等
这边为大家推荐两种比较实用的方法如下

1. webpack配置反向代理，首先可以在项目根目录中创建.env文件

NODE_ENV = 'development'
VUE_APP_BASE_API = '/xxx/'
VUE_APP_SERVER_API = 'http:/xxxxx:xxxx/x/xxx'

在Vue.config.js中使用环境变量动态配置代理，后续只需修改.env文件即可，每次修改完必须重启项目生效

module.exports = {
   proxy: {
      [`${process.env.VUE_APP_BASE_API}`]: {
        target: process.env.VUE_APP_SERVER_API, // 接口的域名
        changeOrigin: true, // 是否跨域
        // secure: false,  // 如果是https接口，需要配置这个参数
        pathRewrite: {
          [`^${process.env.VUE_APP_BASE_API}`]: "",  // 路径重写替换为空
        },
      },
    },
}

webpack配置反向代理其实就是新起了一个服务器，将同源的请求发送到反向代理服务器上，利用服务器之间没有跨域影响，由反向代理服务器去请求真正的url

2. chrome浏览器解决跨域问题
首先在电脑中创建一个新的文件夹例如：D:\MyChromeUserData

其次在桌面右键chrome图标属性中修改目标地址

添加 --disable-web-security --user-data-dir=D:\MyChromeUserData
后缀即为第一步所创建的路径

最后再次打开浏览器，出现提示“你使用的是不受支持的命令标记：--disable-web-security”。稳定性和安全性有所下降信息，说明配置成功

后续使用该浏览器进行联调将不受跨域问题影响

标签：API,Vue,跨域,APP,实用,BASE,VUE,env
来源： https://www.cnblogs.com/sqmmmmm/p/16453777.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

推荐Vue解决跨域问题比较实用的2种方法