跨域问题详解（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为