【Node.JS】跨域请求配置。Access to XMLHttpRequest at xxx from origin xxx has been blocked by CORS policy

跨域请求

跨域请求指的就是不同的域名和端口之间的访问。
由于 ajax 的同源策略影响。跨域请求默认是不被允许的。

示例

比如最近在做一个小项目：
服务器端是 node.js 开发。部署在本地 3000 端口下
客户端是纯 vue 开发。部署在本地 8080 端口下。

在客户端调用服务端获取数据时，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.

解决方案

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

• 配置响应头(本例使用)

即是在服务端响应头文件中配置 “Access-Control-Allow-Origin” 属性

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

/*修改服务端代码，进行全路由配置，允许跨域请求*/
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();
  	}
});

• 使用 JSONP 模式

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

• 使用代理

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