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

憧憬博客

发布于 2020-07-20 17:20:34

99700

代码可运行

文章被收录于专栏：憧憬博客分享憧憬博客分享

运行总次数：0

代码可运行

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

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

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

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

使用下列方法之一：GET， HEAD， POST
不可以设置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请求

可以看到，已经不满足同源策略了，端口不一致。请求头中默认加上了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解决的跨域

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

express