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