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

发表于 分类于 ， 阅读次数： 本文字数： 1.5k 阅读时长 ≈ 1 分钟

为什么要跨越

当需要允许其他人使用自己网站的一些 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

相关文章