跨域&解决方案（CORS，JSONP）

已于 2024-09-15 22:53:25 修改
阅读量912 收藏 29
点赞数 27
文章标签： okhttp
于 2024-09-13 22:06:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80719975/article/details/142138597
版权

目录

（参考视频：B站禹神）

一、跨域&同源策略

指的是 在浏览器中发送的请求从一个域名（或端口、协议）发送到另一个不容的域名（或端口、协议）。这是因为在浏览器中有一个在安全策略叫做**“同源策略”**，它限制了来自不同的源的“写”访问，但允许来自相同源的“读”访问。

具体来说，同源策略要求以下三个组成部分必须完全相同：

  • 协议（http或https）
  • 域名
  • 端口号

二、浏览器会对跨域做出哪些限制？

例：[源A] 和 [源B] ，他们是非同源的，则浏览器会有如下限制：

  • DOM访问限制：[源A] 的脚本不能读取和操作 [源B] 的DOM。
  • Cookie访问限制：[源A] 不能访问 [源B] 的cookie。
  • Ajax响应数据限制：[源A] 可以给 [源B] 发请求，但是无法获得 [源B] 的响应。

备注：在上述限制中，浏览器对Ajax获取数据的限制是影响最大的一个，且实际开发中经常遇到。

三、注意点

  1. 跨域限制仅存在于浏览器端，服务器端不存在跨域限制。
  2. 即便跨域了，Ajax请求也可以正常发出，但响应数据不会交给开发者。
  3. 、

四、CORS解决Ajax跨域问题

4.1 CORS概述

CORS（Cross-Origin Resource Sharing，跨源资源共享）是一种机制，它使用额外的 HTTP 头来告诉浏览器允许一个域上的网页访问另一个域上的资源。
注：使用CORS解决跨域问题是最正统的方式，且要求服务器是“自己人”。

4.2 CORS解决简单请求跨域

简单请求.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>4-解决跨域问题——简单请求</title>
</head>
<body>
  <button onclick="getStudents()">获取学生列表</button>
  
  <script type="text/javascript">
    async function getStudents() {
      console.log('发送请求了')
      const url= 'http://127.0.0.1:8081/students';
      let result = await fetch(url,{
        mode:'cors'
      })
      let data = await result.json()
      console.log(data)
    }
  </script>
</body>
</html>

server.js

const express = require('express')
const app = express()

const students = [
  { id: 1, name: '张三', age: 18, gender: '男' },   
  { id: 2, name: '李四', age: 19, gender: '女' },
]

//定义一个路由处理器
app.get('/students', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500')
  res.send(students)
})

//启动服务器
app.listen(8081,()=>{
  console.log('Example app listening at http://localhost:8081')
})

4.3 简单请求和复杂请求

简单请求复杂请求
请求方法GET、HEAD 或 POSTPUT、DELETE、CONNECT、OPTIONS、TRACE 或任何其他非简单请求方法。
请求头1.请求头中不能包含任何自定义的请求头，只能包含某些预定义的简单头部。
2.如果请求方法是 POST，那么 Content-Type 必须是
  • application/x-www-form-urlencoded
    • 或multipart/form-data
      • 或 text/plain。
请求包含自定义请求头（即不是预定义的简单头部）.
特点浏览器会在响应中检查 Access-Control-Allow-Origin 头，以确定是否允许该跨域请求复杂请求会自动发送预检请求

关于预检请求：

  1. 发送时机：预检请求在实际跨域请求之前发出，是由浏览器自动发起的。
  2. 主要作用：用于向服务器确认是否允许接下来的跨域请求。
  3. 基本流程：先发起OPTIONS请求，如果通过预检，继续发起实际的跨域请求。
  4. 请求头内容：一个OPTIONS预检请求，通常会包含如下请求头：
请求头含义
Access-Control-Allow-Origin指定哪些源可以访问资源。
Access-Control-Allow-Methods列出允许的方法。
Access-Control-Allow-Headers如果预检请求中指定了特定的头部，那么这个头部会列出实际请求中允许使用的头部字段。
Access-Control-Max-Age可选，用来告知浏览器预检请求的结果可以被缓存多久。

4.4 CORS处理复杂请求

复杂请求.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>4-解决跨域问题——简单请求</title>
</head>
<body>
  <button onclick="getStudents()">获取学生列表</button>
  
  <script type="text/javascript">
    async function getStudents() {
      console.log('发送请求了')
      const url= 'http://127.0.0.1:8081/students';
      let result = await fetch(url,{
        mode:'cors',
        method:'GET',
        headers:{
          school:'pecking',
          city:'beijing'
        }
      })
      let data = await result.json()
      console.log(data)
    }
  </script>
</body>
</html>

server,js

在这里插入代码片const express = require('express')
const app = express()

const students = [
  { id: 1, name: '张三', age: 18, gender: '男' },   
  { id: 2, name: '李四', age: 19, gender: '女' },
]
app.options('/students',(req,res)=>{
  res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500')
  res.setHeader('Access-Control-Allow-Methods','GET')
  res.setHeader('Access-Control-Allow-Headers','school,city')
  res.setHeader('Access-Control-Allow-Max-Age',7200)
  res.send()
})
//定义一个路由处理器
app.get('/students', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500')
  res.send(students)
})

//启动服务器
app.listen(8081,()=>{
  console.log('Example app listening at http://localhost:8081')
})

4.5 借助cors库快速完成配置

1.安装库

npm i cors

2.导入

const cors = require(‘cors’)

3.使用中间件

 app.use(cors({
>   origin: 'xxx',	//允许的源
>  	methoda: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'OPTIONS'],	//允许的方法
>  	allowedHeaders: ['xxx']
>   }))		//允许的自定义头
>  	exposedHeaders: ['xxx']	//要暴露的请求头
>  optionSuccessStatus: 200	//预检请求成功的状态码

五、JSONP解决跨域问题

JSONP 的工作原理
  1. 客户端发送请求：
    客户端通过 <script> 标签向服务器发起请求。
    由于 <script> 标签不受同源策略的限制，可以加载任何来源的脚本文件，因此可以用来向跨域服务器请求数据。
  2. 服务器响应：
    服务器接收到请求后，将数据包装在一个函数调用中返回给客户端。
    这个函数通常是客户端在发起请求时指定的一个回调函数名。
  3. 客户端执行回调函数：
    当脚本加载完成后，浏览器会执行该脚本，从而执行回调函数，并将数据作为参数传递给这个函数。这样，客户端就可以处理这些数据了。
应用代码示例：

JSONP.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JSONP</title>
</head>
<body>
  <button onclick = "getStudents()">获取学生数据</button>
  <script type="text/javascript">
    function test(data){
      console.log('callback被调用了',data)
    }
    function getStudents(){
      const script = document.createElement('script')
      script.onload = ()=>{
        script.remove()
      }
      script.src = 'http://127.0.0.1:8081/students?callback=test'
      document.body.appendChild(script)
    }
  </script>
  <!-- <script>
    function callback(data){
      console.log('callback被调用了',data)
    }
  </script>
  <script type="text/javascript" src="http://127.0.0.1:8081/students"></script>
 -->
</body>
</html>

Server.js

const express = require('express')
const app = express()
const cors = require('cors')


const students = [
  { id: 1, name: '张三', age: 18, gender: '男' },   
  { id: 2, name: '李四', age: 19, gender: '女' },
]


app.use(cors())
//定义一个路由处理器
app.get('/students', (req, res) => {
  const { callback } = req.query
  res.send(`${callback}(${JSON.stringify(students)})`)
})

//启动服务器
app.listen(8081,()=>{
  console.log('Example app listening at http://localhost:8081')
})

六、配置代理解决跨域（以下内容未具体阐述）

6.1 自己配置代理服务器

6.2 使用Nginx搭建代理服务器

6.3 借助脚手架搭建代理服务器

披着羊皮不是狼
关注
JSONP解决跨域问题
10-16
前端使用jquery，datatype采用jsonp，服务端采用C#编写的webService
跨域解决方案JSONP
jlin991的博客
02-24 3335
什么是跨域老生常谈的问题了。下面列出一个表格： URL 说明 是否跨域 http://www.a.com/a.js http://www.a.com/b.js 同一个域名 否 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一个域名，不同文件夹 否 http://www.a.com:8080/a.j
【JS】js处理跨域的方案之一：jsonp 详解
最新发布
呆呆狗
08-12 810
js处理跨域的方案之一：jsonp 详解；跨域的定义；JSONP的案例
跨域原理及jsonp解决方法
石头视角
05-09 698
浏览器同源策略 URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。相反，只要协议，域名，端口有任何一个的不同，就被当作是跨域。 e.g. 对于http://store.company.com/dir/page.html进行同源检测： URL 结果 原因 http://store.company.com/dir2/other.html...
跨域数据请求技术JSONP详解
繁依Fanyi的博客
06-20 1985
当谈到 JSONP，就像是在谈论你在一场派对上认识的新朋友一样。让我们从头开始介绍。JSONP，简称 JSON with Padding，是一种利用标签进行跨域数据请求的技术。它允许你在网页中请求来自其他域的数据，而无需担心浏览器的同源策略（Same-Origin Policy）带来的限制。以一个简单的比喻来说，就像你在一家餐馆点菜一样。你可以在自己家里使用电话点餐，然后等着外卖送达，而不需要亲自去餐馆。JSONP允许你在当前页面中加载其他网站的数据，就像是通过电话点餐一样轻松。
JSONP跨域
weixin_53153139的博客
03-01 347
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。 为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。 同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。 使用JSONP解决跨域问题，只改前端不改后端报语法错误（如图中第二条错误）的原因：JSONP是使用动态创建的一个script标签，而script标签返回的是
Ajax跨域问题及解决方案（jsonp，cors）
01-19
解决方案： 1.jsonp 　在远程服务器上设法动态的把数据装进js格式的文本代码段中，供客户端调用和进一步处理；在前台通过动态添加script标签及src属性，表面看上去与ajax极为相似，但是，这和ajax并没有任何关系；...
Ajax跨域请求解决方案-JSONP
12-03
然而，Ajax技术在实现动态网页交互时常常需要跨越这个限制，这时就引入了JSONP（JSON with Padding）作为跨域请求的一种解决方案。本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域...
PHP下ajax跨域的解决方案之jsonp实例分析
10-15
JSONP（JSON with Padding）是JavaScript对象 notation的Padding形式，它是解决浏览器同源策略限制，实现AJAX跨域请求的一种方法。同源策略是浏览器为了安全而实施的一种机制，它规定了只有相同协议、域名和端口的...
跨域解决之JSONP和CORS的详细介绍
01-19
JSONP跨域和CORS跨域 什么是跨域？ 跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！ 同源策略 同源策略：域名、协议、端口均相同。 浏览器执行JavaScript脚本时，会...
jsonp跨域
画个圆圆的地球
12-06 3821
jsonp跨域
跨域访问解决方法-jsonp
01-07
使用jsonp跨域获取json数据。Ajax获取JAVA服务器json数据。
跨域解决方案-JSONP
小卡酷谋的博客
04-27 379
在出现之前，开发者们用一种奇妙的办法来实现跨域–JSONP。要实现JSONP，需要浏览器和服务器来一个“完美”配合。但是，JSONP有着明显的缺点，即其只能支持GET请求。
使用 JSONP 实现跨域（速通）
高大志leo的博客
08-15 3561
两分钟，使用 JSONP 实现跨域。
JSONP实现ajax跨域
西伯利亚狼的博客
01-16 314
JSONP实现ajax跨域技术背景同源策略概念作用实现原理JSON实现ajax跨域参考 技术背景 当向网站A发送请求时(可以通过ajax发送请求)即进行跨域,由于浏览器的同源策略所以会拦截网站A的响应,导致我们不能拿到数据,这时候可以通过JSONP的方式进行跨域。 同源策略 概念 当浏览器的百度主页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如...
使用jsonp解决跨域问题
qq_45481620的博客
09-12 2699
什么是跨域： 1、域名不同时。 2、域名相同，端口不同。 只有域名相同、端口相同时，才可以访问。 可以使用jsonp解决跨域问题。 什么是jsonp? Jsonp其实就是一个跨域解决方案。Js跨域请求数据是不可以的，但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句，做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。 标题jsonp的 原理 浏览器在js请求中，是允许通过script标签的src跨域请求
跨域 & Jsonp【详细】
egg_er的博客
03-07 855
跨域 在了解什么是跨域之前，我们先聊聊为什么会用到跨域，那就不得不说浏览器的同源策略了 那么什么是同源呢: 同源是指两个网页的协议，域名，端口都相同，那么这个两个网页就有相同的源，也就可以相互请求，不会受到浏览器同源策略的影响（同源策略就是：浏览器的保护机制：对于不同源的网页进行数据请求的时候，浏览器会阻止数据返回我们电脑的页面中）； 那么什么是跨域呢： 很简单，与同源相反就是跨域，也就是说，当我们在不同源的网页中进行数据请求的时候，就会用到跨域。 出现跨域的根本原因就是： 浏览器的同源策略不允许非同源的U
jsonp方法跨域的过程
廿四桥明月夜的博客
08-16 9017
说到AJAX就会不可避免的面临两个问题，第一个是AJAX以何种格式来交换数据？第二个是跨域的需求如何解决？这两个问题目前都有不同的解决方案，比如数据可以用自定义字符串或者用XML来描述，跨域可以通过服务器端代理来解决。 但到目前为止最被推崇或者说首选的方案还是用JSON来传数据，靠JSONP来跨域。而这就是本文将要讲述的内容。   JSON和JSONP虽然只有一个字母的差别，但其实他们根本不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值