阅读 316

处理跨域:手动实现CORS和JSONP流程

准备

首先明白一件事:
跨域是浏览器的限制

也就是说不是你真的不能访问,而是浏览器出于他自己的种种担心拦截了你的访问。

至于浏览器在担心什么(什么是跨域,为什么会有跨域),参考:百度

其实cors的原理就是,告诉浏览器:"你别担心啦,这个请求我ok的,让他访问吧"。
而jsonp的原理是,使用浏览器不担心的方式去请求:script标签中的src属性(其他带有src属性的标签也可以,比如img)。

先来模拟出跨域的场景,在本地启动一个最简单的node服务,返回查询参数。

// 新建一个server.js文件,当然前提要安装node

const http = require('http');
const querystring = require('querystring');

const server = http.createServer((req, res) => {
  const query = querystring.parse(req.url.split('?')[1]);
  const queryStr = JSON.stringify(query);
  res.writeHead(200, {
    "Content-type": "text/plain; charset=utf-8"
  });
  res.end(queryStr);
});

server.listen(9999);
console.log('server run at 9999');
复制代码

启动服务

node server.js
复制代码

先在浏览器里直接访问一下 http://127.0.0.1:9999/?name=无用书生&age=25 看到返回没有问题

然后就在当前页面(你现在正在阅读文章的掘金页面)f12打开控制台,在console里创建一个ajax请求

var xhr = new XMLHttpRequest();
xhr.open('get', 'http://127.0.0.1:9999/?name=无用书生&age=25');
xhr.send();
复制代码

执行以后就出现跨域报错了

CORS

首先来看一下cors的跨域原理,其实报错里就写的很明白,我们访问的资源没有设置对掘金这个访问源的头。

在cors的规则中,请求分为简单请求和非简单请求,我们上面发送的就是一个简单请求。

关于简单请求和非简单请求,参考:CORS跨域原理解析

对于简单请求

只要在响应头中(response header)指明允许哪些访问源访问就可以了。

在server.js中给响应头添加 Access-Control-Allow-Origin

const http = require('http');
const querystring = require('querystring');

const server = http.createServer((req, res) => {
  const query = querystring.parse(req.url.split('?')[1]);
  const queryStr = JSON.stringify(query);
  res.writeHead(200, {
    "Content-type": "text/plain; charset=utf-8",
    "Access-Control-Allow-Origin": "*"    // * 代表允许所有的源访问
  });
  res.end(queryStr);
});

server.listen(9999);
console.log('server run at 9999');
复制代码

重启node服务,再试一次

报错没有了,打开network可以看到 Access-Control-Allow-Origin 已经生效,数据也成功获取到

对于非简单请求

将上面请求的方法从get改成put,再次请求 (put方法就属于非简单请求)

var xhr = new XMLHttpRequest();
xhr.open('put', 'http://127.0.0.1:9999/?name=无用书生&age=25');
xhr.send();
复制代码

可以看到跨域报错又出现了

刚才设置的响应头依然存在,却不起作用了。
另外这里可以看到我们本来发送的是put请求,请求方法那里写的却是options。原因就是对于非简单请求浏览器会先发送一次预检,预检通过才会发送真正的请求,这个options就是预检请求,因为没有通过,所以也就没有发送真正的请求

其实报错中也写的很明白,我们访问的资源没有设置允许对PUT这个方法的访问

在server.js中给响应头添加 Access-Control-Allow-Methods,设置允许put方法的请求

const http = require('http');
const querystring = require('querystring');

const server = http.createServer((req, res) => {
  const query = querystring.parse(req.url.split('?')[1]);
  const queryStr = JSON.stringify(query);
  res.writeHead(200, {
    "Content-type": "text/plain; charset=utf-8",
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT",
  });
  res.end(queryStr);
});

server.listen(9999);
console.log('server run at 9999');
复制代码

重启服务以后再次请求,可以看到跨域报错就消失了

还可以看到依然先进行了一次预检请求,这次预检请求通过了,继续发送了put请求

非简单请求还对请求头的信息有所限制,原理还是一样的,通过Access-Control-Allow-Headers在返回头中设置允许的访问头就ok了,比如

var xhr = new XMLHttpRequest();
xhr.open('put', 'http://127.0.0.1:9999/?name=无用书生&age=25');
xhr.setRequestHeader("X-Corx-Test", "aabbcc");
xhr.send();
复制代码

设置允许 X-Corx-Test这个请求头

const http = require('http');
const querystring = require('querystring');

const server = http.createServer((req, res) => {
  const query = querystring.parse(req.url.split('?')[1]);
  const queryStr = JSON.stringify(query);
  res.writeHead(200, {
    "Content-type": "text/plain; charset=utf-8",
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT",
    "Access-Control-Allow-Headers": "X-Corx-Test"
  });

  res.end(queryStr);
});

server.listen(9999);
console.log('server run at 9999');
复制代码

JSONP

由于掘金做了csp处理,无法测试jsonp,用百度进行演示。

什么是csp,参考:阮一峰博客

去掉node服务中对cors的配置

const http = require('http');
const querystring = require('querystring');

const server = http.createServer((req, res) => {
  const query = querystring.parse(req.url.split('?')[1]);
  const queryStr = JSON.stringify(query);
  res.writeHead(200, {
    "Content-type": "text/plain; charset=utf-8"
  });

  res.end(queryStr);
});

server.listen(9999);
console.log('server run at 9999');
复制代码

在百度首页f12打开控制台,这时候如果再使用ajax请求我们的服务又会报跨域的错误

上面说过jsonp的原理就是使用script标签的src不受浏览器跨域限制的原理
在console中创建一个jsonp请求

var script = document.createElement('script');
script.src = 'http://127.0.0.1:9999/?name=无用书生&age=25';
document.head.appendChild(script);
复制代码

执行以后看到这时候就没有报错了

在network中可以看到这是一个成功的get请求,注意jsonp只能发送get请求

这时候请求虽然成功了,还没拿到返回的数据
获取数据的方法就是在前端定义一个接收数据的函数,然后后端返回的js中执行这个函数,并把要返回的数据作为参数传入
比如在前端定义一个叫做 getData 的函数

var script = document.createElement('script');
script.src = 'http://127.0.0.1:9999/?name=无用书生&age=25';
document.head.appendChild(script);
function getData(res) {
  console.log(res);
}
复制代码

在后端返回的内容中调用这个函数,把数据传进去

const http = require('http');
const querystring = require('querystring');

const server = http.createServer((req, res) => {
  const query = querystring.parse(req.url.split('?')[1]);
  const queryStr = JSON.stringify(query);
  res.writeHead(200, {
    "Content-type": "text/plain; charset=utf-8",
  });
  let jsonpStr = `getData(${queryStr})`;
  res.end(jsonpStr);
});

server.listen(9999);
console.log('server run at 9999');
复制代码

重启服务以后,执行前端代码,数据就可以取到了

这个函数名字要前后端约定一致,另外获取完数据以后最好移除一下script标签

var script = document.createElement('script');
script.src = 'http://127.0.0.1:9999/?name=无用书生&age=25';
document.head.appendChild(script);
function getData(res) {
  console.log(res);
  document.head.removeChild(script);
}
复制代码
关注下面的标签,发现更多相似文章
评论