vue几个常用跨域处理方式介绍

接下来我会为你详细讲解“Vue几个常用跨域处理方式介绍”的完整攻略。

1. 跨域问题的原因

由于同源策略的限制，不同源的客户端脚本在没有明确授权的情况下，不能读取对方的资源，也不能获取对方的Cookie、LocalStorage或者IndexedDB等存储信息。

2. Vue中常用的跨域处理方式

在Vue中常见的跨域处理方式有以下几种：

2.1 服务器端代理

通过服务器端代理，将前端的请求转发给目标接口，然后将接口返回的结果再返回给前端。这种方式相对简单，但需要借助后端来实现。

示例代码：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://example.com',
        changeOrigin: true,
        pathRewrite: {
          '/api': ''
        }
      }
    }
  }
}

// 调用方式
axios.get('/api/user').then((res) => {
  console.log(res.data);
})

2.2 JSONP

将请求地址和一个回调函数名一起生成URL，服务器接收到该请求后，将数据包装在回调函数中返回给前端。

示例代码：

function jsonp(url, params, callback) {
  let callbackName = 'jsonp_callback_' + Date.now();
  let script = document.createElement('script');
  let query = Object.keys(params).map(key => key + '=' + encodeURIComponent(params[key])).join('&');
  url += (url.indexOf('?') === -1 ? '?' : '&') + 'callback=' + callbackName + '&' + query;
  window[callbackName] = function(data) {
    delete window[callbackName];
    document.body.removeChild(script);
    callback && callback(data);
  };
  script.src = url;
  document.body.appendChild(script);
}

// 调用方式
jsonp('https://example.com/api/user', {
  name: 'John Doe'
}, (data) => {
  console.log(data);
})

2.3 CORS

通过设置响应头部信息实现跨域，需要后端支持。通常比JSONP更安全。

示例代码：

// 后端代码
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  next();
});

// 调用方式
axios.get('https://example.com/api/user').then((res) => {
  console.log(res.data);
})