nodejs + koa2如何解决跨域问题

最新推荐文章于 2024-10-10 07:16:48 发布

super码王

最新推荐文章于 2024-10-10 07:16:48 发布

阅读量1k

点赞数

分类专栏： js HTML/CSS VsCode 文章标签： ajax node.js

本文链接：https://blog.csdn.net/qq_41885673/article/details/119867150

版权

同源策略 Ajax 跨域 CORS HTTP请求

关键词由CSDN通过智能技术生成

HTML/CSS 同时被 3 个专栏收录

13 篇文章 3 订阅

订阅专栏

VsCode

11 篇文章 0 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

基础知识

同源策略是指三同：同协议/同域名/同端口

对比双方：当前页面的地址和Ajax获取数据的地址（这里可能有点抽象，下面我会举例子说明）

常见报错

场景描述

场景一：我在浏览器地址栏中输入 http://127.0.0.1:8888/api/map 可以访问数据，如下：

场景二：我在一个htm面通过Ajax对场景一接口发起数据请求，html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $().ready(function(){
            $("#btn").click(function(){
                                //http://127.0.0.1:5500/index.html
                //发起 ajax 的请求 http://127.0.0.1:8888/api/map
                $.ajax({
                    type: 'get',
                    url: 'http://localhost:8888/api/map',
                    success: function(data){
                        console.log(data)
                    }
                })
            })
        })
    </script>
</head>
<body>
    <button id="btn">点我试试</button>
</body>
</html>

现象展示

原因说明

对比双方：当前页面的地址和Ajax获取数据的地址（这里可能有点抽象，下面我会举例子说明）

当前页面的地址：http://127.0.0.1:5500/index.html

Ajax获取数据的地址：http://127.0.0.1:8888/api/map

根据“三同”，如果没对服务器进行跨域配置，显然是行不通的

解决方法

在请求头里面配置这两句话即可

    //设置允许跨域
     ctx.set('Access-Control-Allow-Origin',"*")
     ctx.set('Access-Control-Allow-Methods',"OPTIONS,GET,PUT,POST,DELLETE")

效果展示

super码王

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录