跨域之CORS

最新推荐文章于 2024-04-04 04:13:10 发布

BenjaminShih

最新推荐文章于 2024-04-04 04:13:10 发布

阅读量422

点赞数

分类专栏： javascript 文章标签： ajax 跨域 CORS

本文链接：https://blog.csdn.net/sjn0503/article/details/74273847

版权

javascript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

前言

本文会涉及到上一篇文章《跨域之jsonp》中的相关示例流程，先阅读再来食用本文更加美味~

什么是CORS

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

在jsonp中，我们使用了script标签的src属性不受同源策略影响的特性来跨域，但是这样的方式让人觉得不怎么优雅，而且没法愉快地使用ajax，为了愉快地解决这个问题，于是就有了CORS。

相对于jsonp，CORS跨域主要在于对服务器端的处理，只要服务端实现了CROS接口，我们就可以优雅地使用ajax进行跨域了，甚至在客户端书写代码时我们都不会对此有感知。

在上一篇代码示例的基础上，我们对demo中的服务端代码进行改造：

// server.js
const url = require('url');
const http = require('http')
http.createServer((req, res) => {
    const data = {
        message: 'CORS跨域成功'
    };
    res.writeHead(200, {
        'Access-Control-Allow-Origin': 'http://192.168.141.1:8081'
    });
    res.end(data.message);

}).listen(3000);

console.log('服务已启动');

从以上代码中可以看出，我们主要在response的响应头上添加了一个字段“Access-Control-Allow-Origin”，其主要对应浏览器请求中的orgin字段，如果这两个字段值不一致，服务器就会拒绝这一次请求，抛出一个错误（这个错误无法通过状态码识别，因为返回状态码可能是200）

然后我们在客户端中书写正常的ajax请求：

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index.html</title>
</head>
<body>
    <script>
        const xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://127.0.0.1:3000', true);
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                alert(xhr.responseText);
            }
        }
        xhr.send(null);
    </script>
</body>
</html>

可以看出，只是一次正常的请求，这算是CORS跨域的一个好处吧，不用书写像jsonp那样的不优雅的hack代码。

我们在浏览器中打开客户端服务地址获取目标服务器数据，然后查看结果：

这里写图片描述

跨域成功。

优点

客户端不需要额外的冗余代码，优雅简单
支持 POST 请求方式

缺点

因为需要浏览器的额外支持，所以对浏览器版本有要求，存在兼容问题，仅支持 IE 10 以上

BenjaminShih

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域之CORS

前言本文会涉及到上一篇文章《跨域之jsonp》中的相关示例流程，先阅读再来食用本文更加美味~什么是CORSCORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。在jsonp中，我们使用了script标签的src属性不受同源策略影响的特性来跨域
复制链接

扫一扫

专栏目录