Node.JS跨域请求配置方案

今天在用node开发的过程中，再次遇到同源策略的问题：
在客户端调用服务端获取数据时，Chrome 浏览器中报错如下：

Access to XMLHttpRequest at 'http://localhost:3000/getmessage' from origin 'http://localhost:8080' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

看着红了一片的提示，才服务端的跨域问题还没解决。码下此篇，引以为戒。

一、对跨域的理解

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。协议，端口，域名。只要这个3个中有一个不同就是跨域。 这里列举一个经典的列子：

协议跨域

• 由http://a.baidu.com 访问→https://a.baidu.com；

端口跨域

• 由http://a.baidu.com:8080 访问 http://a.baidu.com:80；

域名跨域

• 由http://a.baidu.com 访问→ http://b.baidu.com；

现在很多项目都是采用前后分离的方式开发。在开发的过程中，我们难免经常和跨域打交道。我这里整理日常开发中解决跨域的几种方案。我们前端使用的Vue，后端使用的NodeJs。

二、跨域的解决方案

解决跨域问题常用的有三种方法：

1. 配置响应头

   在服务端响应头文件中配置 “Access-Control-Allow-Origin” 属性。
   这种方案是最简便易操作的。

以 node.js 为例。即在 app.js 文件中添加如下代码: 切记：写在路由使用(use)之前

/*修改服务端代码，进行全路由配置，允许跨域请求*/

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
// var proxy = require('http-proxy-middleware')

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');


var app = express();
 /*从这里开始设置以下代码*/
app.all('*', function(req, res, next){
  res.header('Access-Control-Allow-Origin',  '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, yourHeaderFeild');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  if (req.method === 'OPTIONS'){
    res.send(200);
  }
  else{
    next();
  }
}); 

第二种设置方法，写法不一样，原理相同

app.options("/*", function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
    res.sendStatus(200);
});

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    next();
});

• 3.使用代理

  代理就是使用一个中转站，客户端不直接对服务端发送请求，而是通过访问代理，代理去从服务端获取数据，以这种方式绕过浏览器端的跨域验证。达到跨域请求的目的。

这里要用到node的一个包http-proxy-middleware。关键代码(express)如下

//开启跨域请求 以中间件代理 step1
var proxy = require('http-proxy-middleware')
//跨域请求 step2   使用代理
var app = express();
app.use('/api',proxy({
  target:"http://localhost:3000/",
  changOrigin:true
}));

• 2.使用 JSONP 模式

  受同源策略影响，不被允许跨域请求。但是 script 的 src 属性却允许访问跨域脚本。JSONP 模式就是利用这个原理，服务端请求返回的不再是单纯的 JSON 数据，而是包含调用其他某个 JS 脚本的 JSONP 格式数据，最终在 src 属性中进行跨域调用。从而实现跨域请求。

---