vue中如何解决跨域

在 Vue 中解决跨域问题可以通过以下两种方式：

1. 代理请求

在 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。

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