跨域产生的原因

当协议、子域名、主域名、端口号中任意一个不相同时，浏览器会将请求视为跨域请求，限制浏览器在不同域之间的资源请求。

对跨域的误解

浏览器在发现跨域请求时，会根据同源策略（Same-Origin Policy）进行限制，不允许直接在浏览器中获取跨域请求的响应数据。这意味着即使服务器正常响应了跨域请求，浏览器也无法将响应数据返回给页面，导致无法在前端使用该数据。

axios 跨域问题 axios跨域原理_ajax

解决方法

在Vue项目中的 /src/main.js 中配置axios实例：

import axios from 'axios'

// 创建 axios 实例
const instance = axios.create({
  // 设置基础URL为 '/api'
  baseURL: '/api',
  // 设置请求超时时间
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  },
  // 发送跨域请求时携带凭据（例如 cookie）
  withCredentials: true
})

// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = instance

在Vue项目中的 /config/index.js 中配置

proxyTable: {
      '/api': {
        // 代理的目标地址，即后端服务器的地址。
        target: 'http://127.0.0.1:8443/Spring_Demo_war_exploded/',
        // 在代理请求时，将请求头中的 Origin 字段设置为目标地址，以实现跨域请求。
        changeOrigin: true,
        // 以`/api`开头的路径将被重写为空字符串，即去除`/api`前缀。
        pathRewrite: {
          '^/api': ''
        }
      }
    }

在Vue组件中请求时

login () {
  this.$axios.post('/login', {
    username: this.loginForm.username,
    password: this.loginForm.password
  })
    .then(successResponse => {
      console.log(successResponse)
    })
    .catch(failResponse => {
    })
}

原理和解释

当浏览器发起跨域请求时，代理服务器充当中间人的角色，将请求转发到目标服务器，并将目标服务器的响应返回给浏览器，实现跨域请求的数据交互。具体的原理如下：

  1. 前端应用通过配置代理表，将请求的目标地址设置为代理服务器的地址，例如将请求的基础URL设置为/api。
  2. 当浏览器发送请求时，请求会被发送到代理服务器的地址，而不是目标服务器的地址。
  3. 代理服务器接收到请求后，会将请求转发给目标服务器。
  4. 目标服务器接收到请求并处理后，生成响应数据。
  5. 代理服务器将目标服务器的响应返回给浏览器。
  6. 浏览器接收到响应后，将响应数据返回给前端应用。

通过这种方式，前端应用可以绕过浏览器的同源策略限制，实现与不同域的服务器进行数据交互。代理服务器充当了一个桥梁的作用，实现了跨域请求的中转和转发。

以下是前端与后端交互的一个过程：

  1. 前端应用发起登录请求：
  • 前端代码中的
this.$axios.post('/login', {
  username: this.loginForm.username,
  password: this.loginForm.password
})

发起 POST 请求到 /login。

  • 由于前端配置了代理表，因此实际请求的地址为 http://localhost:8080/api/login。
  1. 请求被代理到后端服务：
  • 代理表配置将 /api/login 的请求转发到 http://localhost:8443/Spring_Demo_war_exploded/login。
  • 后端服务接收到请求。
  1. 后端处理请求：
  2. 后端返回响应：