application/json post跨域（jsonp解决跨域的原理）

出于安全原因，浏览器禁止从脚本发起跨域 HTTP 的请求。我们在请求接口时使用「XMLHttpRequest」，而它遵循了同源策略。

同源策略：浏览器最基本的安全功能。

如果直接请求跨域的接口，那浏览器会直接报错：

Access to XMLHttpRequest at \\\'http://远程接口\\\' from origin \\\'http://项目域名\\\' has been blocked by CORS policy: No \\\'Access-Control-Allow-Origin\\\' header is present on the requested resource.

而且还友好的提示了你没有「Access-Control-Allow-Origin」头部字段。然后下面文章介绍「JSONP 函数调用」和「CORS 共享」两种跨域方法。

JSONP 函数调用

JSONP 是怎样解决跨域问题的？依托于 script 标签没有同源策略，就是说你可以随意访问任何服务器的 js 文件，比如 CDN 的 js 文件，访问文件是不受同源限制的。

所以，我们可以利用这点去向服务器请求一个文件，参数带在 src 的地址上（就是 Get 传输），并且还要和后端约定好后端需要返回的方法名。

后端返回的方法名，其实就是在调用当前页面的函数。

// 回调执行函数function callbackFn(res) {    console.log(JSON.stringify(res));}
var script = document.createElement(\\\'script\\\');script.type = \\\'text/javascript\\\';/** * callback 参数「后端使用，来获取执行方法名称」 * callbackFn 方法名，用来传入参数，并执行*/script.src = \\\'http://域名?参数=参数值&参数=参数值&callback=callbackFn\\\';document.head.appendChild(script);

参数名 callback 是后端用来获取你当前页面函数名的。

echo $_GET[\\\'callback\\\'] . \\\'(\\\' . \\\"{\\\'参数名\\\' : \\\'参数值\\\'}\\\" . \\\')\\\';

后端返回的数据正确格式为：

callbackFn({\\\"hello\\\":\\\"word\\\"})

callbackFn 是你传过去的参数值，就调用当前页面的函数方法。

你访问一个文件，文件返回的一个方法，此方法调用你页面的函数。这样的一个逻辑，可以解决接口跨域问题。

缺点是只能用 GET 传输。

跨域资源共享「CORS」

CORS 是一种机制，可以通过设置请求头和响应头来解决跨域问题；

前端在请求接口的时候，需要添加一个请求头：

Origin: http://baidu.com（请求的域名）

然后后端在返回数据的时候多返回一个响应头：

Access-Control-Allow-Origin: http://baidu.com（允许的域名）

Access-Control-Allow-Origin 这个响应头，后面如果添加的是「*」号，代表的是允许所有资源跨域访问。

图片来源和参考资料：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

https://segmentfault.com/a/1190000011145364

https://www.cnblogs.com/chaoyuehedy/p/5556557.html

图片授权基于 www.pixabay.com 相关协议

推荐阅读

Vue 在哪步执行数据监听？

HTML 页面的渲染流程

HTTP 协议的请求头和响应头

原创文章，作者：小道研究，如若转载，请注明出处：https://www.sudun.com/ask/34594.html

application/json post跨域（jsonp解决跨域的原理）

相关推荐

用过才知道，什么样的边界防御最靠谱

Win10 360浏览器无法打开特定网站页面，有时兼容模式不稳定。

如何共享内外部网络

服务器是什么

发表回复