vue配置代理解决跨域问题

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
                        },
                    })

image

什么是跨域问题?

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

解决方法

方法一

在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
                        },
                    })
posted @   codesheepXK  阅读(952)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示