在 Vue 中解决跨域问题可以通过以下两种方式：
- 代理请求
在 vue.config.js 文件中配置一个代理，把接口请求代理到目标服务器，这样就可以绕过浏览器的同源策略了。
module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', // 目标服务器地址 changeOrigin: true, // 允许跨域 pathRewrite: { '^/api': '/api', // 将 /api 替换成 /api }, }, }, }, };
上面的配置中，我们将 /api 请求代理到了 http://localhost:3000/api，并将 /api 替换成了目标服务器上的 /api。
- JSONP
JSONP（JSON with padding）是一种解决跨域问题的技术。它通过动态创建一个 <script> 标签，将请求发送到目标服务器，并通过回调函数的方式获取服务器返回的数据。
export function fetchData(callback) { const script = document.createElement('script'); script.src = 'http://localhost:3000/api?callback=getData'; // 目标服务器地址和回调函数名 document.body.append(script); window.getData = (data) => { callback(data); script.remove(); }; }
在上面的代码中，我们动态创建了一个 <script> 标签，将目标服务器地址和回调函数名作为参数传递进去。服务器返回的数据会被包裹在回调函数中，最终通过回调函数的方式将数据传递给我们的应用程序。
