Vue解决跨域问题

一、Vue解决跨域问题

跨域问题是我们开发过程中常遇到的问题。前后端分离开发中，前端通过 ajax 请求数据时，往往会出现这种错误：Access to XMLHttpRequest at 'http://example.com' from origin 'http://localhost:8080' has been blocked by CORS policy.

CORS（Cross-Origin Resource Sharing，跨源资源共享）是 W3C 标准，它允许浏览器向跨源服务器请求数据，实现前后端分离开发。由于浏览器的同源策略，导致直接发起跨域的请求时，浏览器会拦截这些请求。

Vue 是一个前端框架，作为前后端分离开发中的一部分，它的开发者对于解决跨域问题也提供了多种解决方案。

二、Vue解决跨域的方法

Vue 中，我们可以通过修改服务端后台代码、安装插件、配置代理、使用 jsonp 等方法来解决跨域问题。

三、Vue跨域解决方案

1. 通过修改服务端代码解决跨域问题

我们可以在服务端后台代码中添加如下 header：

response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Methods','POST, GET, OPTIONS, DELETE, PUT');
response.setHeader('Access-Control-Allow-Headers', 'Content-Type,token');
response.setHeader('Access-Control-Max-Age', '3600');

Access-Control-Allow-Origin 表示允许访问的源，* 表示全部允许。Access-Control-Allow-Methods 表示允许的方法，Content-Type 表示发送请求的数据类型，Access-Control-Max-Age 表示缓存访问过程中这些响应的最长时间，即在这段时间内不用再进行一次预检请求。

2. 通过安装插件解决跨域问题

Vue 中有很多插件可以解决跨域问题，例如：vue-resource、axios 等。可以在执行 ajax 的过程中设置 withCredentials:true，表示允许跨域请求携带 cookie。

// vue-resource
Vue.http.options.credentials = true;

// axios
axios.defaults.withCredentials = true;

3. 通过配置代理解决跨域问题

Vue 中可以在 config/index.js 中配置代理。通过配置代理，可以解决开发时出现跨域问题的情况。

module.exports = {
  dev: {
    proxyTable: {
      // 代理配置
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

这样，只要请求地址是以 /api 开头的，就会被代理到 http://example.com。

4. 使用 jsonp 解决跨域问题

Jsonp 是利用 javascript 的 script 标签，从其他域中加载数据。通过 jsonp，我们可以在当前页面创建一个 script 标签，该标签的请求地址指向其他域的地址。其他域返回内容时，需要在返回数据外包裹一层函数调用。

let script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://example.com';
document.body.appendChild(script);

function callback(data) {
  // 处理数据
}

四、Vue解决跨域的三种方法

1. Vue解决跨域CORS

CORS 是一种跨域解决方案，后端支持该方案后，前端使用 XMLHttpRequest 请求 API 时，浏览器会自动根据 CORS 协议进行请求，从而实现跨域。

2. Vue解决跨域的三种方法之代理

通过配置代理，把请求转到本地服务器上，再由本地服务器进行跨域请求。

module.exports = {
  dev: {
    proxyTable: {
      // 代理配置
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

3. Vue解决跨域的三种方法之JSONP

使用 jsonp 可以不受跨域限制地获取其他域的数据，使用起来非常简单。

let script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://example.com?callback=callbackFunc';
document.body.appendChild(script);

function callbackFunc(data) {
  // 处理数据
}

五、Vue解决跨域请求

1. get 请求

this.$http.get('http://example.com', {
  params: {
    id: 123
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

2. post 请求

this.$http.post('http://example.com', {
  id: 123
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

3. jsonp 请求

this.$http.jsonp('http://example.com', {
  params: {
    callback: 'callbackFunc',
    id: 123
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});

六、Vue解决跨域代理

Vue 中的代理是通过 devServer 对象来实现的，该对象可以配置一些服务器的选项，例如代理、开启 gzip 等选项。

devServer: {
  proxy: {
    '/api': {
      target: 'http://example.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

以上代码表示：访问 localhost:8080/api 将会被代理到 http://example.com。