今天在用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个中有一个不同就是跨域。 这里列举一个经典的列子：
协议跨域
由 访问→；
端口跨域
由:8080 访问 :80；
域名跨域
由 访问→ ；
现在很多项目都是采用前后分离的方式开发。在开发的过程中，我们难免经常和跨域打交道。我这里整理日常开发中解决跨域的几种方案。我们前端使用的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)如下
//开启跨域请求 以中间件代理 step1var 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 属性中进行跨域调用。从而实现跨域请求。
