今天在用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。
二、跨域的解决方案
解决跨域问题常用的有三种方法：
-
配置响应头
在服务端响应头文件中配置 “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 属性中进行跨域调用。从而实现跨域请求。