跨域请求及其解决方案

最新推荐文章于 2024-06-05 00:40:27 发布

pro1822

最新推荐文章于 2024-06-05 00:40:27 发布

阅读量2.3k

点赞数

分类专栏： Ajax基础文章标签：跨域 node.js https ajax axios

本文链接：https://blog.csdn.net/qq_41523175/article/details/124386119

版权

Ajax基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、同源策略

1、什么是同源？

同ip，同端口，即为同源。

同源策略是浏览器的一个安全功能，它限制了浏览器通过ajax随意获取数据。

不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的重要安全机制。

2、模拟不同源，获取ajax数据。

（1）8080端口

index.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>index</title>
</head>
<body>
    <h1>server on 8080</h1>
</body>
</html>

npm install http-server

http-server

（2）3000端口

server.js：

const Koa = require("koa");
const router = require("koa-router")();
const nunjucks = require("nunjucks");
const static = require("koa-static");
const views = require("koa-views");
const parser = require("koa-parser");
const app = new Koa();
app.use(parser());
app.use(static(__dirname + "/public"));
app.use(views(__dirname + "/views", {
    map: {
        html: "nunjucks"
    }
}))

router.get("/data", ctx => {
    ctx.body = "hello world";
})


app.use(router.routes());

// 设置监听端口
app.listen(3000, () => {
    console.log("server is running");
})

（3）用8080的端口，ajax请求3000端口的数据

修改8080的index.html：

<body>
    <h1>server on 8080</h1>
    <script src="js/axios.min.js"></script>
    <script>
        // 跨域请求3000端口的数据
        axios.get("http://127.0.0.1:3000/data").then(res => {
            console.log(res.data);
        })
    </script>
</body>

第一个报错的意思是：你这个请求跨域了，不能跨域。

网络里面查看：

3、总结：

不同源之间，数据不能访问。

二、解决方案（一）——jsonp

1、script标签

script标签是可以获取其它服务器的文件的。

例如：

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>

2、创建json.js

我们在3000端口项目中，创建json.js文件：

json.js：

let data3000 = "hello jsonp";

如图，可以访问到：

3、修改8080端口的index.html文件：

<body>
    <h1>server on 8080</h1>
    <script src="http://127.0.0.1:3000/js/json.js"></script>
    <script>
        console.log(data3000);
    </script>
</body>

4、访问8080端口，查看控制台：

三、使用封装jsonp的模块（koa-jsonp）来跨域请求

1、下载安装

cnpm install --save koa-jsonp

2、3000端口的server.js：

const Koa = require("koa");
const router = require("koa-router")();
const nunjucks = require("nunjucks");
const static = require("koa-static");
const views = require("koa-views");
const parser = require("koa-parser");
const jsonp = require("koa-jsonp");
const app = new Koa();
app.use(jsonp());
app.use(parser());
app.use(static(__dirname + "/public"));
app.use(views(__dirname + "/views", {
    map: {
        html: "nunjucks"
    }
}))

router.get("/data", ctx => {
    ctx.body = "hello world";
})


app.use(router.routes());

// 设置监听端口
app.listen(3000, () => {
    console.log("server is running");
})

4、8080端口的index.html：

<body>
    <h1>server on 8080</h1>
    <script src="js/jquery.min.js"></script>
    <script>
        $.ajax({
            url: "http://127.0.0.1:3000/data",
            dataType: "jsonp"
        }).done(res => {
            console.log(res);
        })
    </script>
</body>

上面的ajax是：使用jQuery封装的ajax，并且dataType是【jsonp】。

5、控制台输出：

6、查看：F12【网络】

原理：是通过回调的方式动态加载后台的回调函数。（无需深究）

这个方法是get请求。

那其它方式的请求怎么办呢？

四、解决方案（二）——设置响应头，来解决跨域请求的问题

1、分析

默认情况下，由于同源策略，不能够跨域请求。

所以，我们可以更改设置。

2、设置头部信息（Access-Control-Allow-Origin）

3、修改3000端口，server.js：

router.get("/data", ctx => {
    // 设置服务器的响应头信息
    ctx.set("Access-Control-Allow-Origin", "http://127.0.0.1:8080")
    ctx.body = "hello world";
})

允许【某个地址】来跨域请求3000端口。

【*】代表：允许全部。

router.get("/data", ctx => {
    // 设置服务器的响应头信息
    ctx.set("Access-Control-Allow-Origin", "*")
    ctx.body = "hello world";
})

4、修改8080端口的index.html，使用axios发送请求：

<body>
    <h1>server on 8080</h1>
    <script src="js/axios.min.js"></script>
    <script>
        axios.get("http://127.0.0.1:3000/data").then(res => {
            console.log(res.data);
        })
    </script>
</body>