vue+axios+webpack配置跨域（axios配置）

where_slr

已于 2023-08-14 15:19:10 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 学习笔记 vue 文章标签： axios webpack 跨域

于 2019-08-08 14:02:45 首次发布

原文链接：https://www.jianshu.com/p/de7d3f0520b4

学习笔记同时被 3 个专栏收录

44 篇文章

订阅专栏

Javascript

35 篇文章

订阅专栏

vue

12 篇文章

订阅专栏

什么是跨域？

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

配置proxyTable解决跨域问题
我们使用vue-cli生成的项目目录里，config下面的index.js有个proxyTable属性：

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
        pathRewrite: {
          '^/api': '' //路径重写，也可以写成 '^/api': 'https://www.easy-mock.com/mock/5d4b7d772b863e1413ad66ab/iVP/'
        }
      }
    },

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

其实vue-cli里的这个设置来自于其集成的插件 http-proxy-middleware

github: https://github.com/chimurai/http-proxy-middleware

这个插件可以帮我们在本地虚拟一个服务器接收请求并代替你发送该请求，因为是在服务端替我们发请求所以就没有我们烦恼的跨域问题了，当然这只适用于开发环境。

项目上线怎么办？

我们通过配置proxyTable解决了本地开发环境请求接口跨域的问题，但是我们项目上线还是要替换成线上的接口地址的。如果我们的前端项目合后端服务不在同一个域名下，我们可以使用目前比较流行的 CORS 来处理跨域。这里就不展开讲了。

我们可以利用webpack配置的环境变量来实现开发环境和打包后的api区分
假设我们使用axios进行请求发送，如下配置：

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
那么我们发请求的时候只需要这么写：

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

参考：
axios跨域问题(包括开发环境和生产环境)
vue中axios解决跨域问题和拦截器使用