接口跨域问题——CORS、JSONP

最新推荐文章于 2023-11-29 16:11:31 发布

h_jQuery

最新推荐文章于 2023-11-29 16:11:31 发布

阅读量450

点赞数 1

分类专栏： node.js Vue jquery 文章标签： vue ajax nodejs jsonp javascript

本文链接：https://blog.csdn.net/h_jQuery/article/details/118076284

版权

Vue 同时被 3 个专栏收录

86 篇文章 0 订阅

订阅专栏

node.js

26 篇文章 0 订阅

订阅专栏

jquery

18 篇文章 1 订阅

订阅专栏

跨域

1.接口的跨域问题

get和post接口，不支持跨域请求

解决接口跨域问题的方案主要有两种：

1.CORS（主流的解决方案，推荐使用）

2.JSONP（有缺陷的解决方案：只支持get请求）

CORS ：跨域资源共享

cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题

**CORS （Cross-Origin Resource Sharing，跨域资源共享）**由一系列 HTTP 响应头组成，这些 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源

浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头，就可以解除浏览器端的跨域访问限制

CORS的注意事项：

① CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置，即可请求开启了 CORS 的接口。
② CORS 在浏览器中有兼容性。只有支持 XMLHttpRequest Level2 的浏览器，才能正常访问开启了 CORS 的服
务端接口（例如：IE10+、Chrome4+、FireFox3.5+）

使用步骤分为如下 3 步：

① 运行 npm install cors 安装中间件
② 使用 const cors = require(‘cors’) 导入中间件
③ 在路由之前调用 app.use(cors()) 配置中间

// 导入cors,（解决跨域问题）
const cors = require('cors')
// 注册cors
server.use(cors())

CORS请求的分类

客户端在请求 CORS 接口时，根据请求方式和请求头的不同，可以将 CORS 的请求分为两大类，分别是：
① 简单请求
② 预检请求

简单请求：

① 请求方式：GET、POST、HEAD 三者之一
② HTTP 头部信息不超过以下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、Content-Type（只有三个值application/x-www-form-urlencoded、multipart/form-data、text/plain）

预检请求：

① 请求方式为 GET、POST、HEAD 之外的请求 Method 类型
② 请求头中包含自定义头部字段
③ 向服务器发送了 application/json 格式的数据

简单请求和预检请求的区别：

简单请求的特点：客户端与服务器之间只会发生一次请求。
预检请求的特点：客户端与服务器之间会发生两次请求，OPTION 预检请求成功之后，才会发起真正的请求

JSONP接口

概念：浏览器端通过

特点：

① JSONP 不属于真正的 Ajax 请求，因为它没有使用 XMLHttpRequest 这个对象。
② JSONP 仅支持 GET 请求，不支持 POST、PUT、DELETE 等请求

注意事项：

如果项目中已经配置了 CORS 跨域资源共享，为了防止冲突，必须在配置 CORS 中间件之前声明 JSONP 的接口。否则
JSONP 接口会被处理成开启了 CORS 的接口

实现的步骤：

① 获取客户端发送过来的回调函数的名字
② 得到要通过 JSONP 形式发送给客户端的数据
③ 根据前两步得到的数据，拼接出一个函数调用的字符串
④ 把上一步拼接得到的字符串，响应给客户端的

路由模块：router.js

// 1.导入express
const express = require("express")
// 2.创建路由对象
const router = express.Router()

// http://localhost:8080/api/user?name=zs&age=20
// req.query:{name:'zs',age:20}
router.get("/user", (req, res) => {
    // req.query是获取查询字符串（在地址栏上面）
    const query = req.query
    res.send({status:200,msg:'get请求成功',data:query})
    // res.send({ data: {name:'zs',age:20},msg:'获取数据成功',status:200})
    // console.log(req.query);
})
// 一般get使用查询字符串req.query获取数据
// post使用模拟表单req.body获取数据

router.post('/reg', (req, res) => {
    // 需要注册中间件：express.urlencoded({extended:false})
    // req.body是模拟表单传过来的字符串
    const body = req.body
    // 调用res.send()方法，把数据相应给客户端
    res.send({status:200,msg:'post请求成功',data:body})
})

// 向外导出路由对象router
module.exports=router

接口模块：test.js

// 在这个界面就只用导入路由，注册路由使用，其他的都不用再做与路由相关的代码
// 导入express
const express = require("express")
// 创建服务器对象
const server = express()
// 导入cors,（解决跨域问题）
const cors = require('cors')
// 导入路由
const router = require("./router")
//要解析URL-encoded格式的请求体数据
server.use(express.urlencoded({ extended: false }))

// jsonp也是解决跨域的，跟cors是同类，jsonp要放在cors注册之前，不然就会被当成cors接口处理
server.get('/api/jsonp', (req,res) => {
    // 1.获取客户端发送过来的回调函数名称
    const funcName = req.query.callback
    // 2.通过jsonp形式发给客户端的数据
    const data = { uname: 'zs', age: 22 }
    // 3.根据前两步的数据，拼接出一个函数调用的字符串
    // JSON.stringify()将json格式的数据转成字符串
    // 函数名(参数)
    const str = `${funcName}(${JSON.stringify(data)})`
    // 把拼接得到的字符串，响应给客户端的<script>标签进行解析执行
    res.send(str)
})
// 注册cors
server.use(cors())
// cors的注册一样要放在路由的前面
server.use("/api",router)

// 监听端口，后面的回调函数要不要无所谓
server.listen('8080', () => {
    console.log("服务器启动了，地址：localhost: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>Document</title>
    //需要引入jquery.js文件。因为用到$.ajax()函数
    <script src="./test/js/jquery-1.11.0.js"></script>

</head>

<body>
    <!-- 协议，域名，端口号只要有一个不同，就会发生跨域问题 -->
    <!-- 由于服务器和客户端请求的文件的协议，域名，端口，有三个之一不一样就会产生跨域 -->
    <!-- 同源：协议，域名，端口三个都一样 -->
    <button id="btnGet">get请求</button>
    <button id="btnPost">post请求</button>
    <button id="btnJsonp">jsonp请求</button>

    <!-- cors解决跨域——test.js -->
    <script>
        $(function () {
            $('#btnGet').click(function () {
                // get
                // http://127.0.0.1:5500/index.html?name=zs&age=22
                $.ajax({
                    type: 'get',
                    url: 'http://localhost:8080/api/user',
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
            $('#btnPost').click(function () {
                // post
                // http://127.0.0.1:5500/index.html
                $.ajax({
                    type: 'post',
                    url: 'http://localhost:8080/api/reg',
                    data: {
                        name: 'zs',
                        age: 22
                    },
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
            // jsonp
            //调用 $.ajax() 函数，提供 JSONP 的配置选项，从而发起 JSONP 请求
            $('#btnJsonp').click(function () {
                // jsonp
                // http://127.0.0.1:5500/index.html
                $.ajax({
                    type: 'get',
                    url: 'http://localhost:8080/api/jsonp',
                    // 表示要发起JSONP的请求
                    dataType: 'jsonp',
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        })
    </script>
</body>

</html>

h_jQuery

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
接口跨域问题——CORS、JSONP

跨域1.接口的跨域问题get和post接口，不支持跨域请求解决接口跨域问题的方案主要有两种：1.CORS（主流的解决方案，推荐使用）2.JSONP（有缺陷的解决方案：只支持get请求）CORS ：跨域资源共享cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题**CORS （Cross-Origin Resource Sharing，跨域资源共享）**由一系列 HTTP 响应头组成，这些 HTTP 响应头决定浏览器是否阻止前端 JS 代
复制链接

扫一扫