在 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>
标签,将目标服务器地址和回调函数名作为参数传递进去。服务器返回的数据会被包裹在回调函数中,最终通过回调函数的方式将数据传递给我们的应用程序。