一、什么是跨域
当在Vue应用中通过axios等工具发送HTTP请求时，如果请求的目标URL与当前页面的域名、协议、端口号不一致，就会触发浏览器的同源策略限制，导致跨域问题。
跨域问题是由浏览器引起的安全限制，而不是Vue框架本身导致的。Vue本身并不限制跨域访问，它只是一个前端框架，负责构建用户界面和处理数据逻辑。
解决跨域办法有代理服务器、JSONP和CORS
二、JSONP
原理：利用script标签的src属性可以跨域加载资源的特性，通过动态创建script标签，并指定一个回调函数作为参数发送请求，在服务端返回数据时会将数据作为回调函数的参数传入，从而实现跨域获取数据。
// 在需要发送跨域请求的组件中引入jsonp库（如axios-jsonp）
import jsonp from 'axios-jsonp';// 发送请求
this.$jsonp('http://api.example.com/data', {params: {// 请求参数},// 回调函数名，默认为'callback'callbackParamName: 'callback',
}).then(response => {// 处理响应数据
}).catch(error => {// 处理错误
});优点：
1、实现简单：JSONP的实现相对简单，只需要将返回的数据包裹在一个函数调用中，然后通过动态创建<script>标签来获取数据。
2、跨域支持：由于它利用了<script>标签的同源策略，所以可以突破浏览器的同源策略限制，实现跨域数据请求。
缺点：
1、只支持GET请求：JSONP只支持GET请求，不能使用POST、PUT、DELETE等其他HTTP方法。
2、安全性问题：JSONP的安全性相对较低，因为它返回的数据是明文的，没有经过任何的加密或编码，容易被恶意攻击者获取并利用。
3、兼容性问题：虽然大部分现代浏览器都支持JSONP，但一些较老的浏览器可能不支持。
三、CORS（Cross-Origin Resource Sharing）
原理：浏览器在发送跨域请求时会自动在请求头中添加Origin字段，如果服务端允许该请求的源（Origin）访问，服务端就会在响应头中添加Access-Control-Allow-Origin字段，浏览器收到响应后会检查该字段，如果允许，则将响应返回给前端。（跨域资源共享）
服务端设置响应头：在服务端设置响应头然后在Vue中发送跨域请求：
// Express框架示例，设置服务器响应头
app.use((req, res, next) => {res.header('Access-Control-Allow-Origin', '*');res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');next();
});发送跨域请求：
this.$http.get('http://api.example.com/data', {// 请求参数
}).then(response => {// 处理响应数据
}).catch(error => {// 处理错误
});四、代理服务器
原理：在Vue的配置文件中指定一个代理服务器，将前端的请求转发到该代理服务器，然后由代理服务器向目标服务器发送请求并获取响应数据，最后再将响应返回给前端。这样可以绕过浏览器的同源策略限制。
如果用的是webpack，就在vue.config.js配置如下：
// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://target-domain.com', // 目标服务器地址changeOrigin: true, // 是否改变源地址pathRewrite: {'^/api': '' // 重写路径}}}}
}如果用的是vite，就在vite.config.js配置如下：
// vite.config.js
import { defineConfig } from 'vite';export default defineConfig({server: {proxy: {'/api': {target: 'http://api.example.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
});发起请求：
import axios from 'axios'axios.get('/api/some-endpoint').then(response => {console.log(response.data);
});参考文章：
在Vue中解决跨域问题可以通过以下几种方式：使用JSONP、CORS、代理服务器_vue axios jsonp-CSDN博客
