跨域问题详解（vue工程中的解决办法）

目录

1. 什么是跨域

2. 如何解决跨域问题

1. 配置request.js

2. 配置vite.config.js

---

1. 什么是跨域

       跨域问题指的是当一个网页的源（origin）与另一个网页的源不同时，浏览器出于安全考虑，会限制页面中的跨域请求。源是由协议、主机名和端口号组成的。如果两个页面的源不同，就称为跨域。

       跨域问题的产生是基于浏览器的同源策略（Same-Origin Policy），这是一种安全机制，用于限制一个源的文档或脚本如何能与另一个源的资源进行交互。同源策略要求一个源的脚本只能读取来自同一个源的数据，而不能访问其他源的数据。

       跨域问题会影响到诸如 XMLHttpRequest 或 Fetch 等网络请求，以及通过 <img>、<script>、<link> 等标签加载的资源。例如，如果一个网页在 http://example.com 上加载，它想要通过 XMLHttpRequest 请求 http://api.example.net/data 的数据，由于源不同，就会遇到跨域问题。

       为了允许跨域请求，目标服务器必须在响应中包含特定的跨域资源共享（CORS）头信息，如 Access-Control-Allow-Origin，来指示浏览器该如何处理跨域请求。

       跨域问题常见于前端开发中，特别是当使用 AJAX 或 Fetch API 进行跨域请求时。要解决跨域问题，可以采取一些方法，如设置服务器端的 CORS 配置、使用代理服务器、JSONP（仅适用于 GET 请求）等。

简单来说：由于浏览器的同源策略限制，向不同源(不同协议、不同域名、不同端口)发送ajax请求会失败

2. 如何解决跨域问题

1. 配置request.js

将原本的baseURL赋值为'/api'，如下所示

import axios from 'axios';
//定义一个变量,记录公共的前缀 , baseURL
//const baseURL = 'http://localhost:8080';修改如下
const baseURL = '/api';
//相当于http://localhost:5173/api
const instance = axios.create({ baseURL })


//添加响应拦截器
instance.interceptors.response.use(
    result => {
        return result.data;
    },
    err => {
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

export default instance;

2. 配置vite.config.js

// https://vitejs.dev/config/
export default defineConfig({
  //其他配置...,

  //做服务相关的配置
  server: {
    //配置代理
    proxy: {
      //如果请求路径有'/api'就需要进行处理
      '/api': {
        //要更换成哪个源
        target: 'http://localhost:8080',//后台服务所在的源
        //要不要更换源
        changeOrigin: true,
        //路径重写，把路径里面的/api替换成空字符串
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

如果原来的URL为

http://localhost:5173/api/user/register

那么配置后为

http://localhost:8080/user/register