为什么会出现跨域的问题&＃xff1f;

Javascript的访问是根据同源策略来的&＃xff0c;同源策略即&＃xff08;同端口&＃xff0c;同协议&＃xff0c;同域名&＃xff09;。现在主流的开发方式都是前后端分离&＃xff0c;所以很容易就出现跨域的问题。cors即跨域资源共享&＃xff0c;解决了前后端分离的资源共享问题。目前主流的浏览器都支持cors

CORS出现场景 简答请求和非简单请求

有些情况并不会触发cors的预检请求&＃xff08;即Options请求&＃xff09;我们将这种称为简单请求&＃xff0c;会触发options请求的为非简单请求

  1. 使用下列方法之一&＃xff1a;GET&＃xff0c;  HEAD&＃xff0c;  POST
  2. 不可以设置http头超出以下列表的字段:
    Accept, Accept-Language,Content-Language,Content-Type &＃xff08;需要注意额外的限制&＃xff09;,Viewport-Width, Content-Type等。
  • 值得说一下的是Content-Type,它的值仅限于下列三者之一&＃xff1a;text/plain, multipart/form-data,application/x-www-form-urlencoded

满足以上两种条件的为简单请求 不满足则为非简单请求

例子

我后台是采用express启动的服务&＃xff0c;端口3000

前台是直接利用webstorm创建的html文件,利用webstorm的本地服务器去请求后台接口&＃xff0c;发送ajax请求

发送ajax请求
触发跨域

可以看到&＃xff0c;已经不满足同源策略了&＃xff0c;端口不一致。请求头中默认加上了origin,已经触发了跨域

这个时候需要服务端允许你跨域获取资源

后台允许跨域

重启一下express服务

响应看到
响应看到数据

可以看到&＃xff0c;后台只要简单设置一下 response.header(&＃39;Access-Control-Allow-Origin&＃39;, &＃39;*&＃39;),允许任何获取即可解决。

利用Jsonp解决

JSONP由两部分组成&＃xff1a;回调函数和数据&＃xff0c;回调函数是当响应到来时应该在页面中调用的函数&＃xff0c;回调函数的名字一般在请求中指定。当服务器响应时&＃xff0c;服务器端就会把该函数和数据拼成字符串返回。

主要就是利用src静态资源引用允许跨域

前端代码

后端express代码

var express &＃61; require(&＃39;express&＃39;);
var router &＃61; express.Router();
var querystring &＃61; require(&＃39;querystring&＃39;);/* GET home page. */
router.get(&＃39;/&＃39;, function(req, res, next) {res.render(&＃39;index&＃39;, { title: &＃39;Express&＃39; });
});router.get(&＃39;/test_jsonp&＃39;, function(req, res, next) {let params &＃61; querystring.parse(req.url.split(&＃39;?&＃39;)[1]);let obj &＃61; {name: &＃39;张三&＃39;,sex: &＃39;男&＃39;};// res.status &＃61; 200;//// res.body &＃61; params[&＃39;callback&＃39;] &＃43; &＃39;(&＃39; &＃43; JSON.stringify(obj) &＃43; &＃39;)&＃39;;//// jsonp返回设置res.writeHead(200, { &＃39;Content-Type&＃39;: &＃39;text/Javascript&＃39; });res.write(params[&＃39;callback&＃39;] &＃43; &＃39;(&＃39; &＃43; JSON.stringify(obj) &＃43; &＃39;)&＃39;);res.end();});module.exports &＃61; router;

这是一种非常常用的跨域请求方式。主要原理是利用了script 标签可以跨域请求的特性&＃xff0c;由其 src属性发送请求到服务器&＃xff0c;服务器返回 Javascript 代码&＃xff0c;浏览器接受响应&＃xff0c;然后就直接执行了&＃xff0c;这和通过 script 标签引用外部文件的原理是一样的。现在淘宝有些还是利用jsonp解决的跨域