Ajax基础：CORS跨域

最新推荐文章于 2023-09-29 16:14:27 发布

昔冰_G

最新推荐文章于 2023-09-29 16:14:27 发布

阅读量431

点赞数

分类专栏： Ajax 文章标签： ajax javascript html

本文链接：https://blog.csdn.net/qq_38800316/article/details/120449161

版权

Ajax 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

CORS，跨域资源共享，允许浏览器向服务器发送Ajax请求，克服Ajax只能同源使用的限制

操作：

服务端配置响应头，客户端继续使用ajax，客户端不需要做出调整

1、允许哪些客户端访问我(*表示所有)：

res.header('Access-Control-Allow-Origin', '*')

2、允许客户端使用哪些请求方法访问我：

res.header('Access-Control-Allow-Methods', 'get,post');

端口3000的客户端去访问3001，需要3001给这个请求去开门，放它进来，以实现访问

端口3000下的客户端html代码：

<body>
    <button id="btn">提交请求</button>
    <!-- 引入了ajax.js（封装好的ajax函数）-->
    <script src="js/ajax.js"></script>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            // 调用ajax去向端口3001下的路由cors发送请求
            ajax({
                type: 'get',
                url: 'http://localhost:3001/cors',
                success: function(data) {
                    alert(data);
                }
            })
        }
    </script>
</body>

端口3001下服务端代码：

const express = require('express');
const corspp = express();

corspp.get('/cors', (req, res) => {
    // 允许哪些客户端访问我(*表示所有)
    res.header('Access-Control-Allow-Origin', '*')
    // 允许客户端使用哪些请求方法访问我
    res.header('Access-Control-Allow-Methods', 'get,post');
    // 用于cors测试
    res.send('来自3001的回应：哈喽，我的兄弟3000');
})

corspp.listen(3001);
console.log('3001已启动');

当我们将服务端的响应头由原来的 * 更改为 3002 端口后

res.header('Access-Control-Allow-Origin', 'http://localhost:3002');

3000的客户端将无法访问

【备注】：

如果对所有的路由的所有请求方式都要执行这样的配置的话，那么考虑低耦合高内聚，我们可以借助中间件，use拦截所有。

corspp.use((req, res) => {

    res.header('Access-Control-Allow-Origin', 'http://localhost:3002');

    res.header('Access-Control-Allow-Methods', 'get,post');

    res.send('来自3001的回应：哈喽，我的兄弟3000');
})

昔冰_G

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax基础：CORS跨域

CORS，跨域资源共享，允许浏览器向服务器发送Ajax请求，克服Ajax只能同源使用的限制操作：服务端配置响应头，客户端继续使用ajax，客户端不需要做出调整 1、允许哪些客户端访问我(*表示所有)：res.header('Access-Control-Allow-Origin', '*') 2、允许客户端使用哪些请求方法访问我：res.header('Access-Control-A...
复制链接

扫一扫