关于跨域问题的一个解决方法

为什么要跨越

当需要允许其他人使用自己网站的一些 API 时,跨域就是一个必须要解决的问题了。

跨域解决方案

JsonP

因为 HTML 中的标签的 Src 属性可以跨域,所以该方案通过动态引入<script>标签并添加 Src 属性完成跨域请求 但是在这种情况下,服务器不能仅仅返回一段 JSON,而是要返回一段完整的 JavaScript 代码(比如一个函数),这样调用它的代码才能成功调用到返回的数据。并且这种情况下因为是插入了一个标签,所以在调用 API 的时候只能以 GET 方式调用(这是我的理解,或许还有其他方法可以调用 POST?)。

Ajax

通过设置 HTTP 头

1
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 为例: 前端:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let url = 'xxx.xxx/api/xxx';
let para = '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 设置 后台:

1
2
3
4
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

请鼓励我的原创文章