解决Vue前后端跨域问题的方式汇总

解决Vue前后端跨域问题的方式汇总

什么是跨域?

简单来说，跨域就是从一个域名的网页去请求另一个域名的资源，就会产生跨域问题。

例如：当前前端页面的域名是 http://domain-a.com，试图向 http://api.domain-b.com 发送Ajax请求，就会产生跨域问题。

常见跨域问题解决方案

1. 代理

通过后台自建一个代理服务器来转发请求。

示例代码：

// server.js

const express = require('express');
const request = require('request');

const app = express();

// 设置端口号
const port = 3000;

// 应用级中间件，对请求进行处理
app.use('/', (req, res) => {
  // 定义目标后端服务地址
  const url = 'http://domain-b.com/api';

  // 发送代理请求
  req.pipe(request(url)).pipe(res);
});

// 监听端口，启动服务
app.listen(port, () => {
  console.log(`Server is running on port ${port}`)
})

2. CORS

通过设置后端接口支持CORS，允许前端页面跨域访问。

示例代码：

// Node.js

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, {
    // 设置跨域允许哪个源访问
    'Access-Control-Allow-Origin': '*',
    // 设置跨域请求能够携带Cookie
    'Access-Control-Allow-Credentials': true,
    // 设置允许的请求方式
    'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',
    // 设置允许的请求头
    'Access-Control-Allow-Headers': 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With'
  });

  if (req.method === 'OPTIONS') {
    res.end();
  }
});

server.listen(3000, () => {
  console.log(`Server is running on port 3000`);
});

// Vue.js

this.$http.get(`http://domain-b.com/api`).then(response => {
    console.log(response);
}).catch(error => {
    console.log(error);
});

两条示例说明

示例一：使用代理

假如当前前端项目的域名为 http://localhost:8000，后端API接口的域名为 http://api.domain-b.com，可以通过自建一个代理服务器来转发请求，解决跨域问题。

首先安装 express 和 request 依赖：

npm install express request --save

在根目录下新建 server.js 文件，写入以下代码：

const express = require('express');
const request = require('request');

const app = express();

const port = 3000;

app.use('/', (req, res) => {
  const url = 'http://api.domain-b.com/api';

  req.pipe(request(url)).pipe(res);
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
})

然后在终端运行：

node server.js

之后，你可以在前端项目中直接发送请求到代理服务器，虽然请求的地址和后台API接口不是同一个域名，但代理服务器可以将请求转发到后台API接口，从而实现跨域请求：

this.$http.get(`http://localhost:3000`).then(response => {
  console.log(response);
}).catch(error => {
  console.log(error);
});

示例二：使用CORS

如果后端API接口支持CORS，也可以使用CORS解决跨域问题。

假设后端API接口的域名为 http://api.domain-b.com，这时候需要在后台API接口中增加CORS支持，在响应头中添加以下内容：

// Node.js

const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Credentials': true,
    'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With'
  });

  if (req.method === 'OPTIONS') {
    res.end();
  }
});

server.listen(3000, () => {
  console.log(`Server is running on port 3000`);
});

然后在前端项目中直接发送请求到后端API接口即可：

this.$http.get(`http://api.domain-b.com/api`).then(response => {
  console.log(response);
}).catch(error => {
  console.log(error);
});

以上两种方法都可以有效地解决跨域问题，开发者可以根据具体情况选择合适的方法。