JS 跨域请求知多少

跨域

当两个域不同时，基于同源策略资源将不能共享。而采用技术使得不同域的网站能资源交互的方式叫跨域

怎么跨域

1.JSONP

借助的是script标签有能力不受限制从其他域加载资源，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的回调函数，并且会把我们需要的json数据作为参数传入

举个例子，服务器希望有个叫callback的参数来启用JSONP的功能。我们的请求如下

http://www.example.net/sample.aspx?callback=mycallback

如果没有JSONP，可能返回的是JS对象

{ foo: 'bar' }

但有JSONP的话，服务器一旦接受到叫callback的参数,就会把JS对象包含在函数调用中返回

mycallback({ foo: 'bar' })

你会发现，将调用mycallback，所以你在页面里需要定义mycallback函数

mycallback = function(data){
  alert(data.foo);//'bar'
};

当script载入成功后会执行mycallback，并且会把我们需要的json数据作为参数传入

优点

• 兼容性更好，在更加古老的浏览器中都可以运行，并且在请求完毕后可以通过调用callback的方式回传数据。

缺点

• 只支持GET请求而不支持其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题

2.CORS

For simple CORS requests, the server only needs to add the following header to its response: Access-Control-Allow-Origin: *，如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问

举个例子，CORS on ExpressJS

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

Access-Control-Allow-Origin：
该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

优点

• JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

• 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

• 支持cookie

缺点

• 兼容性 ：JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS

demo及学习链接

JSONP-demo
CORS-demo
jsonp 介绍
cors 应用
每天都努力一点点
谢谢你看完

---