内容简介：关于跨域问题的一个解决方法
为什么要跨越
当需要允许其他人使用自己网站的一些 API 时，跨域就是一个必须要解决的问题了。
跨域解决方案
JsonP
因为 HTML 中的标签的 Src 属性可以跨域，所以该方案通过动态引入<script> 标签并添加 Src 属性完成跨域请求
但是在这种情况下，服务器不能仅仅返回一段 JSON，而是要返回一段完整的 JavaScript 代码（比如一个函数），这样调用它的代码才能成功调用到返回的数据。并且这种情况下因为是插入了一个标签，所以在调用 API 的时候只能以 GET 方式调用（这是我的理解，或许还有其他方法可以调用 POST？）。
Ajax
通过设置 HTTP 头
Access-Control-Allow-Origin: *
使得任意网站都可以直接使用 Ajax 像调用源站 API 一样来跨域访问其他站点的 API
但是这种方案也有一定的限制，它只允许三种操作：GET、HEAD、POST
并且允许的 Content-Type 只有三种：
-
application/x-www-form-urlencoded -
multipart/form-data -
text/plain
注意这里并没有熟悉的 application/json，所以这也给使用造成了一些困难。
这里可以参考 FireFox 关于跨域的开发者文档： https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
使用 Ajax 解决跨域的一个例子
这里为了方便，以 Angular 和 Node 为例：
前端：
leturl='xxx.xxx/api/xxx';
letpara='a=4';
$http.post(url, para, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function (response) {
console.log(response);
if (response.data.success) {
$scope.videoSrc = response.data.videoLink;
$scope.frameVideoSrc = $sce.trustAsResourceUrl($scope.videoSrc);
} else {
$scope.videoSrc = response.data.errInfo;
}
});
需要注意 para 的格式（这里是 Form 的上传格式）和 post 时候的 Headers 设置
后台：
router.post('/searchvideo/:vendorName?/:productId?', function (req, res, next) {
res.setHeader("Access-Control-Allow-Origin", "*");
console.log(req);
}
服务器这边只需要在 Header 里声明可以跨域就可以了
还要完善
在跨域的时候还遇到了 Client 先给 Server 发送 Option，Server 同意以后才发起跨域请求的机制，这里需要再去看一些资料，并且也还需要尝试实现以下 JSONP
参考资料
Using CORS： https://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
