vue-cli项目设置proxyTable解决开发环境跨域问题

什么是跨域？

  • 世界上本没有跨域

浏览器有一个叫做同源策略的东西。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
同源策略规定了如果两个页面的协议、域名、端口中任意一个不相等，就认为两个页面具有不相同的源
两个不同源的页面资源交互会受到浏览器的同源策略限制，也就出现了我们说的跨域问题
配置proxyTable解决跨域问题

我们使用vue-cli生成的项目目录里，config下面的index.js有个proxyTable属性

然后我们做如下设置

1
2
3
4
5
6
7
8
9
proxyTable: {
      // 这里可以理解为使用"/api" 代替 "target" 里的地址，
     // 比如说我们要调用的地址是 http://www.example.com/api/list,   则写成 /api/list 就可以了
      '/api': {
        target: 'http://www.example.com',  // 你请求的api地址
        secure: false,                    // 如果是https接口，需要配置这个参数
        changeOrigin: true        //这个参数是用来回避跨站问题的，配置完之后发请求时会自动修改http header里面的host
      }
    },

注意以上配置只在开发环境起作用
webpack-dev-server更加详细的配置: https://webpack.js.org/configuration/dev-server/#devserver-proxy

那么为什么我们设置这个proxyTable可以帮我们解决跨域问题呢？

其实vue-cli里的这个设置来自于其集成的插件 http-proxy-middleware
github: https://github.com/chimurai/http-proxy-middleware
这个插件可以帮我们在本地虚拟一个服务器接收请求并代替你发送该请求，因为是在服务端替我们发请求所以就没有我们烦恼的跨域问题了，当然这只适用于开发环境。

项目上线怎么办？

我们通过配置proxyTable解决了本地开发环境请求接口跨域的问题，但是我们项目上线还是要替换成线上的接口地址的。如果我们的前端项目合后端服务不在同一个域名下，我们可以使用目前比较流行的 CORS 来处理跨域。这里就不展开讲了。
前端如何配合服务端进行CORS跨域
我们可以利用webpack配置的环境变量来实现开发环境和打包后的api区分
假设我们使用axios进行请求发送
我们可以做如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import axios from 'axios';

const config = {
  timeout: 60000，
  withCredentials: true        // 访问线上api时axios发送跨域请求时需要设置这个参数
}

if(process.env.NODE_ENV === 'development') {
  // 开发环境
} else if(process.env.NODE_ENV === 'production') {
  // 生产环境
  config.baseURL = "http://www.baidu.com";   //这里是线上api请求地址
}

const server = axios.create(config);

这样配置后我们开发环境中就可以使用proxyTable代理请求，项目打包后请求地址就会被替换成线上的api地址。
假设我们开发环境请求的api地址为 http://www.example.com/api/list
线上环境请求的api地址为 http://www.baidu.com/api/list
那么我们发请求的时候只需要这么写

1
2
3
server.get("/api/list").then(res => {
    ...
})

这样我们项目打包后，webpack就可以自动帮我们把请求地址替换成线上的地址了。

作者：萧雪圣
链接：https://www.jianshu.com/p/de7d3f0520b4
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。