背景

在完成了页面样式的制作后将开始和后端联调数据。

好在后端提供的接口已经可以使用，我们按照正常逻辑去请求接口，这里用 axios 库来实现。按照文档说明一顿操作后，参数和路径都设置成功，可是在按下按钮发送请求的时候出错了，报了一个跨域的问题。

axios解决跨域问题 axios怎么处理跨域的?_前端


第二条错误是因为没有验证用户信息，后面会提到。

思路

既然是跨域，就要搞清楚跨域的原因是什么。

说简单点，浏览器有一个同源策略，我们的协议、域名和端口需要一致，如果其中有一个不同就会出现跨域问题。

因为我们前端的域名（IP）是 http://localhost:8081，但是后端服务的地址肯定不是这个。随便举一个例子，后端的接口可能是 https://www.something.com，它们的域名肯定是不一样的。

提一下，我用的技术栈是 axios + vue2.0，且在开发环境下使用，下面的方法只针对前面提到的技术栈和环境实践过

解决办法

  1. 修改 axios 配置，设定 baseURL为 ‘/api’，可以自定义其他内容，只要保证跟后面的配置一致即可
import axios from 'axios'

// axios 基本配置，采用创建实例的方法
const post = axios.create({
  baseURL: '/api',
  method: 'POST',
  auth: {
    username: 'xxx',
    password: 'xxx'
  }
})
  1. 修改 vue.config.js 文件，声明一个 devServer 属性

它的原理是 axios 的 baseURL 会加在每次请求的客户端端口后。假设我们原来访问的 localhost:8081/blog/create 就变成了 localhost:8081/api/blog/create 。

然后我们又在 vue.config.js 中拦截了 /api ，并把 /api 及其前面的内容替换成了 https://www.request-domain.com ，所以实际访问的 URL 是 https://www.request-domain.com/blog/create 。

module.exports = {
  devServer: {
    proxy: {
      // 和上面自定义的 baseURL 保持一致
      '/api': {
        target: 'https://www.request-domain.com',
        pathRewrite: { '^/api': '' },
      }
    }
  },
}