标签：vue 请求 代理 跨域 true localhost api1

Vue的配置代理

起因

当我直接通过axios使用百度翻译API时显示以下错误，产生跨域问题

axios.get('https://fanyi-api.baidu.com/api/trans/vip/translate',{
                        dataType: 'jsonp',
                        params: {
                            q: str,
                            appid: appid,
                            salt: salt,
                            from: from,
                            to: to,
                            sign: sign
                        },
                    })

什么是跨域问题？

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域，在如今前后端分离的模式下，前后端的域名是不一致的，会发生跨域访问问题

解决方法

方法一

在vue.config.js中添加如下配置：

devServer:{
  proxy:"http://localhost:8080"
}

• 优点：配置简单，请求资源时直接发给前端（8080）即可。

• 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。

• 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

方法二

编写vue.config.js配置具体代理规则：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,//说谎 用于控制请求头的host值
        pathRewrite: {'^/api1': ''},
        ws:true
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}

• changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
• changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
• 一定要进行pathRewrite: {'^/api1': ''} 路径重写
• ws:用于支持websocket
• 该方法可以同时配置多个代理

举例

那么对于上述例子我们可以做如下改动

在vue.config.js下面

 devServer: {
        proxy: {
            '/api1': { // 匹配所有以 '/api1'开头的请求路径
                target: 'https://fanyi-api.baidu.com/api/trans/vip/translate', // 代理目标的基础路径
                changeOrigin: true, //说谎 用于控制请求头的host值
                pathRewrite: { '^/api1': '' },
                ws: true
            },
     
        }
    }

代码处修改

 axios.get('http://localhost:8080/api1',{
                        dataType: 'jsonp',
                        params: {
                            q: str,
                            appid: appid,
                            salt: salt,
                            from: from,
                            to: to,
                            sign: sign
                        },
                    })

标签：vue,请求,代理,跨域,true,localhost,api1
来源： https://www.cnblogs.com/codesheepXK/p/16663762.html

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