跨域请求

跨域请求指的就是不同的域名和端口之间的访问。
由于 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 属性中进行跨域调用。从而实现跨域请求。

• 使用代理

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