前端proxy跨域配置

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

在开始一个项目的时候经常会出现跨域的问题，这是因为本地启动项目后访问了服务器的接口导致跨域。 所以只要在项目的配置文件中添加代理即可解决。

以下列数据为例：

• 本地的地址是：http://localhost:8080
• 请求的域名是：test.com
• 进行登录操作时，请求的接口是：

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

解决方法：

在 vue.config.js 文件中设置Proxy代理，可以同时配置多个代理服务器

(注：有的项目可能是在 /config/index路径的文件里面，配置参数名为proxyTable)

配置包括其中几项：

1. target:目标主机地址，也就是我们要请求的地址
2. changeOrigin：true // 开启代理（允许跨域）
3. ws: false, //如果要代理 websockets，配置这个参数
4. secure: false // 如果是https接口，需要配置这个参数
5. pathRewrite：重写路径

pathRewrite这里是比较容易出问题的地方，它需要与target结合使用。并不是所有的都需要代理，而是有标识的才用代理，以下面的例子来说，就是当axios匹配到/api时开启代理

如果遇到前缀为'/api'的url，重写的内容具体要看需要请求路径中是否含有api(划重点)：

具体代码如下：

如果有多个需要配置的路径重写，在里面增加键值对即可。

proxy: {
  "/api": {
    target: 'http://test.com',
    changeOrigin: true,
    pathRewrite: {
      "^/api": 'api'	
    }
  }
}

• 情况1： '^/api': 'api' （路径中包含api）

  http://localhost:8080/api 被重写为 target+'api'

  即路径变为 test.com/api

  代理后实际请求的地址是：test.com/api/user/login

• 情况2： '^/api': '' （路径中不包含api）

  http://localhost:8080/api 被重写为target，

  即路径变为 test.com,

  代理后实际请求的地址是：test.com/user/login

• pathRewrite是否可以不写？

  答：如果不使用pathRewrite属性过滤掉代理域名，会导致404

PS：配置完成，需要重启项目才可以生效