【跨域】一招带你解决跨域问题——CORS

蜡笔雏田学前端

已于 2022-08-22 16:42:15 修改

阅读量1.7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： AJAX 文章标签： ajax javascript http 前端

于 2022-06-13 19:41:09 首次发布

本文链接：https://blog.csdn.net/xuxuii/article/details/125265407

AJAX 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了跨域问题的起源、同源策略，并介绍了JSONP和CORS两种解决方案。JSONP通过script标签实现异步数据获取，适用于老版浏览器；而CORS是现代标准，支持所有HTTP请求。通过实例和比较，帮助理解两者在实际开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

🚀跨域

🚀跨域

在这里插入图片描述
前置小知识👇

1.1 🌍同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。

同源： 协议、域名、端口号必须完全相同。

违背同源策略就是跨域。

下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例：

URL	结果	原因
http://store.company.com/dir2/other.html	同源	只有路径不同
http://store.company.com/dir/inner/another.html	同源	只有路径不同
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同 ( http:// 默认端口是 80)
http://news.company.com/dir/other.html	失败	主机不同

1.2 ❓为什么有跨域问题

因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。

因此：跨域问题是针对ajax的一种限制。

1.3 ⭕如何解决跨域

有以下两种方法：JSONP和CORS

最常用的是CORS方法,而且也是最简单的😂。

首先介绍一下JSONP方法，由难到易入手吧！

1.3.1 ✅JSONP

JSONP是什么？

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。
JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img，link，iframe，script。

JSONP 就是利用 script 标签的跨域能力来发送请求的。

JSONP 的使用 :

A. 动态地创建一个 script 标签

var script = document.createElement("script");

B.设置 script 的 src，设置回调函数

<script>
  script.src = "http://127.0.0.1:8000/jsonp-server";
  // 处理数据
  function handle(data) {
     // 获取result元素
     const result = document.getElementById('result')
     result.innerHTML = data.name
 }
</script>

C. 将 script 添加到 body 中

document.body.appendChild(script);

D. 服务器中路由的处理

// jsonp服务
app.all('/jsonp-server', (request, response) => {
  const data = {
    name: 'xuxu'
  }
  // 将数据转化为字符串
  let str = JSON.stringify(data)
  // 返回结果
  response.end(`handle(${str})`)
})

jsonp实现跨域的原理：服务端必须返回一个函数调用，函数的参数就是给客户端返回的结果数据，这个函数前端必须要申明，否则就会报错。

1.3.2 💻JSONP实践

📺案例

需求：在输入框中输入任一名称，当失去焦点时，向服务端发送请求，校验是否存在该用户名，服务端直接返回已存在，改变input框的颜色。

效果如下：
在这里插入图片描述

整体代码如下：
JSONP实践.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>案例</title>
</head>

<body>
  用户名：<input type="text" id="username">
  <p></p>
  <script>
    // 获取input元素
    const input = document.querySelector('input')
    const p = document.querySelector('p')
    
    // 声明handle函数
    function handle(data) {
      input.style.border = 'solid 1px #f00'
      // 修改p标签的提示文本
      p.innerHTML = data.msg
    }
    
    // 绑定事件
    input.onblur = function () {
      // 获取用户输入值
      let username = this.value
      // 向服务端发送请求 检测用户名是否存在

      // 1.创建一个 script 标签
      const script = document.createElement('script')
      // 2.设置标签的src属性
      script.src = 'http://127.0.0.1:8000/check-username'
      // 3.将script插入到body标签的最后
      document.body.appendChild(script)
    }
  </script>
</body>
</html>

server.js

// 1.引入express
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
// 用户名检测是否存在
app.all('/check-username', (request, response) => {
  const data = {
    exist: 1,
    msg: '用户名已经存在'
  }
  let str = JSON.stringify(data)
  // 返回结果
  response.end(`handle(${str})`)
})

// 4.监听端口启动服务 
app.listen(8000, () => {
  console.log("服务已经启动，8000 端口监听中....")
})

接下来介绍最简便的一种方法👇

1.3.3 ✅CORS

CORS是什么？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部(响应头)字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
CORS 怎么工作的？

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

CORS 的使用:

主要是服务器端的设置：

app.all('/cors-server', (request, response) => {
  // 设置响应头
  // 设置允许跨域 
  response.setHeader('Access-Control-Allow-Origin', '*')
  // 设置允许使用自定义的请求头字段
  response.setHeader('Access-Control-Allow-Headers', '*')
  // 设置允许任意的HTTP请求方法访问
  response.setHeader('Access-Control-Allow-Method', '*')
  response.send('hello CORS')
})

以下常见的响应头设置：

设置允许任何域访问：

 response.setHeader('Access-Control-Allow-Origin', '*')

设置允许使用自定义的请求头字段

response.setHeader('Access-Control-Allow-Headers', '*')

设置允许任意的HTTP请求方法访问

response.setHeader('Access-Control-Allow-Method', '*')

设置可以暴露的响应头

response.setHeader('Access-Control-Expose-Headers','*')

还有其他的响应头设置，就不一一列出了。

1.3.4 🚩与JSONP的比较

CORS与JSONP的使用目的相同，但是比JSONP更强大。

JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

今天的分享就到这里啦。✨