CORS跨域资源共享及解决方案_非必要不建议开启cors跨域资源共享功能,如需开启,请严格限制origin值为需要资源共

作者：IT小白 | 2024-06-08 20:46:41

踩

非必要不建议开启cors跨域资源共享功能,如需开启,请严格限制origin值为需要资源共

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

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解决的跨域

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/691133