CORS跨域资源共享及解决方案

为什么会出现跨域的问题?

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

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

有些情况并不会触发cors的预检请求(即Options请求)我们将这种称为简单请求,会触发options请求的为非简单请求

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

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

例子

我后台是采用express启动的服务,端口3000

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

发送ajax请求
触发跨域

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

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

后台允许跨域

重启一下express服务

响应看到
响应看到数据

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

利用Jsonp解决

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

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

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<script src="deepClone.js"></script>

<script defer src="http://localhost:3000/test_jsonp?callback=callback"></script>
<!--<script src="http://localhost:3000/test_jsonp?callback=callback"></script>-->

<script>
    // function addScript(url) {
    //     // 创建一个script标签
    //     var scpt = document.createElement('script');
    //     // 设置对应的src
    //     scpt.src = url;
    //     // 追加到页面
    //     document.body.appendChild(scpt);
    // }
    //
    // window.onload = function() {
    //     addScript('http://localhost:3000/callback=dataS')
    // }

    var callback = function(res) {
        console.log(res)
    }


</script>

</body>
</html>

后端express代码

var express = require('express');
var router = express.Router();
var querystring = require('querystring');

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.get('/test_jsonp', function(req, res, next) {

  let params = querystring.parse(req.url.split('?')[1]);


  let obj = {
    name: '张三',
    sex: '男'
  };

  // res.status = 200;
  //
  // res.body = params['callback'] + '(' + JSON.stringify(obj) + ')';
  //



  // jsonp返回设置
  res.writeHead(200, { 'Content-Type': 'text/javascript' });

  res.write(params['callback'] + '(' + JSON.stringify(obj) + ')');

  res.end();

});

module.exports = router;

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

您的支持是对我最大的鼓励!

发表于: 作者:憧憬。
关注互联网以及分享全栈工作经验的原创个人博客和技术博客,热爱编程,极客精神
Github 新浪微博 SegmentFault 掘金专栏