前端开发攻略---彻底弄懂跨域&解决方案

nibabaoo2024-08-17 8:01

目录

1、浏览器的同源策略

[1.1 源](#1.1 源)

[1.2 同源与非同源](#1.2 同源与非同源)

[1.3 同源请求与非同源请求](#1.3 同源请求与非同源请求)

2、跨域受到的限制

3、注意点

4、CORS解决Ajax跨域问题

[4.1 CORS概述](#4.1 CORS概述)

[4.2 CORS解决简单请求跨域](#4.2 CORS解决简单请求跨域)

[4.3 简单请求与复杂请求](#4.3 简单请求与复杂请求)

[4.4 CORS解决复杂请求跨域](#4.4 CORS解决复杂请求跨域)

[4.5 借助CORS库快速完成配置](#4.5 借助CORS库快速完成配置)

5、JSONP解决跨域

6、配置代理解决跨域

[6.1 自己配置代理服务器](#6.1 自己配置代理服务器)

[6.2 使用Nginx搭建代理服务器](#6.2 使用Nginx搭建代理服务器)

[6.3 借助脚手架搭建代理服务器](#6.3 借助脚手架搭建代理服务器)

1、浏览器的同源策略

浏览器为了确保资源安全，而遵循的一种策略。

1.1 源

源 = 协议 + 域名 + 端口号

1.2 同源与非同源

1.3 同源请求与非同源请求

所处源与目标源不一致，就是非同源，又称异源或跨域

2、跨域受到的限制

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

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

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

3、注意点

  1. 跨域限制仅存在浏览器端，服务端不存在跨域限制
  2. 即使跨域了，Ajax请求也可以正常发出，但响应数据不会交给开发者
  3. <link>、<script>、<img>....这些标签发出的请求也可能跨域，只不过浏览器对标签跨域不做严格限制，对开发几乎无影响

4、CORS解决Ajax跨域问题

4.1 CORS概述

CORS全称：Cross-Origin Resource Sharing （跨域资源共享），是用于控制浏览器校验跨域请求的一套规范，服务器依照CORS规范，添加特定响应头来控制浏览器校验，规则如下：

  • 服务器明确表示拒绝跨域请求，或没有表示，则浏览器校验不通过
  • 服务器明确表示允许跨域请求，则浏览器校验通过

备注：使用CORS解决跨域是最正统的方式，且要求服务器是"自己人"

4.2 CORS解决简单请求跨域

整体思路：服务器在给出响应时，通过添加Access-Control-Allow-Origin响应头，来明确表达允许某个源发起跨域请求，随后浏览器在校验时，直接通过

服务端核心代码，以（express框架为例）

javascript 复制代码 
const express = require('express')

const app = express()

const data = [
  { id: 123, name: '张三' },
  { id: 456, name: '李四' },
  { id: 789, name: '赵云' },
]
app.get('/student', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')
  res.send(data)
})

app.listen(1234, () => {
  console.log('服务运行中...')
})

4.3 简单请求与复杂请求

CORS会把请求分为两类、分别是：简单请求、复杂请求

简单请求 复杂请求
请求方法为：GET、HEAD、POST 1. 不是简单请求，就是复杂请求 2. 复杂请求会自动发送预检请求
请求字段要符合《CORS安全规范》 简记：只要不手动修改请求头，一般都能符合改规范 1. 不是简单请求，就是复杂请求 2. 复杂请求会自动发送预检请求
请求头的Content-Type的值只能是以下三种 * text/plain * multipart/form-data * application/x-www-form-urlencoded 1. 不是简单请求，就是复杂请求 2. 复杂请求会自动发送预检请求

关于预检请求：

  1. 发送时机：预检请求再实际跨域请求之前发出，是由浏览器自动发起的
  2. 主要作用：用于向服务器确认是否允许接下来的跨域请求
  3. 基本流程：先发起OPTIONS请求，如果通过预检，继续发起实际的跨域请求
  4. 请求头内容：一个OPTIONS预检请求，通常会包含如下请求头
请求头 含义
Origin 发起请求的源
Access-Control-Request-Method 实际请求的HTTP方法
Access-Control-Request-Headers 实际请求中使用的自定义头（如果有的话）

4.4 CORS解决复杂请求跨域

**1、第一步：**服务器先通过浏览器的预检请求，服务器需要返回如下响应头

响应头 含义
Access-Control-Allow-Origin 允许的源
Access-Control-Allow-Methods 允许的方法
Access-Control-Allow-Headers 允许的自定义头
Access-Control-Max-Age 预检请求的结果缓存时间（可选）

服务端核心代码：

javascript 复制代码 
const express = require('express')

const app = express()

const data = [
  { id: 123, name: '张三' },
  { id: 456, name: '李四' },
  { id: 789, name: '赵云' },
]

app.options('/student', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')
  res.setHeader('Access-Control-Allow-Method', 'GET')
  res.setHeader('Access-Control-Allow-Headers', 'a,b,c')
  res.setHeader('Access-Control-Allow-Age', 9000)
  res.send()
})

app.get('/student', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')
  res.send(data)
})

app.listen(1234, () => {
  console.log('服务运行中...')
})

4.5 借助CORS库快速完成配置

上述的配置中需要自己配置响应头，或者需要自己手动封装中间件，借助cors库，可以更方便完成配置

1、安装cors

TypeScript 复制代码 
npm i cors

2、简单配置

javascript 复制代码 
app.use(cors())

3、完整配置

javascript 复制代码 
const corsOption = {
  origin: 'http://127.0.0.1:5500', // 允许的源
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'HEAD', 'OPTIONS'], // 允许的方法
  allowedHeaders: [], // 允许的自定义头
  exposedHeaders: [], // 要暴露的响应头
  optionsSuccessStatus: 200, // 预检请求成功的状态码
}
app.use(cors(corsOption))

5、JSONP解决跨域

1、JSONP概述： JSONP是利用了**<script>标签** 可以跨域加载脚本，且不受严格限制的特性，可以说是程序员智慧的结晶，早起一些浏览器不支持CORS时，可以靠JSONP解决跨域

2、基本流程

  • 第一步：客户端创建一个<script>标签，并将其src属性设置为包含跨域请求的URL，同时准备一个回调函数，这个回调函数用于处理返回的数据
  • 第二步：服务端接收到请求后，将数据封装在回调函数中并返回
  • 第三步：客户端的回调函数被调用。数据以参数的形式传入回调函数。

3、图示

4、服务端核心代码：

javascript 复制代码 
const express = require('express')
const app = express()

const data = [
  { id: 123, name: '张三' },
  { id: 456, name: '李四' },
  { id: 789, name: '赵云' },
]

app.get('/getData', (req, res) => {
  res.send(`fn(${JSON.stringify(data)})`)
})

app.listen(1234, () => {
  console.log('服务运行中...')
})

5、客户端核心代码：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="getData()">获取数据</button>
  </body>
  <script>
    function fn(data) {
      console.log(data)
    }
    function getData() {
      const script = document.createElement('script')
      script.onload = () => {
        script.remove()
      }
      script.src = 'http://127.0.0.1:1234/getData'
      document.body.appendChild(script)
    }
  </script>
</html>

6、配置代理解决跨域

6.1 自己配置代理服务器

借助 http-proxy-middleware 配置代理

javascript 复制代码 
const { createProxyMiddleware } = require('http-proxy-middleware')

// 拦截所有带有'/api'的请求,转发给target
app.use(
  '/api',
  createProxyMiddleware({
    target: 'https://www.toutiao.com',
    changOrigin: true, // 允许跨域
    pathRewrite: {
      '^/api': '',
    },
  })
)

6.2 使用Nginx搭建代理服务器

1. 安装 Nginx

首先，你需要在你的服务器上安装 Nginx。根据你的操作系统，安装步骤可能有所不同。

在 Ubuntu/Debian 系统上：

javascript 复制代码 
sudo apt update
sudo apt install nginx

在 CentOS/RHEL 系统上：

javascript 复制代码 
sudo yum install epel-release
sudo yum install nginx

在 Fedora 系统上：

javascript 复制代码 
sudo dnf install nginx

安装完成后，启动 Nginx 并设置开机自启：

javascript 复制代码 
sudo systemctl start nginx
sudo systemctl enable nginx

2、配置 Nginx 作为代理服务器

接下来，配置 Nginx 作为代理服务器。你可以编辑 Nginx 配置文件，通常在 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default，具体路径根据操作系统和 Nginx 版本可能有所不同。

基本的代理配置示例如下：

  1. 打开配置文件：

    sql 复制代码 
    sudo nano /etc/nginx/nginx.conf

  2. 添加一个 server 块来配置代理设置。例如，假设你想要将所有请求代理到 http://backend-server：

    javascript 复制代码 
    http {
    ...
    server {
        listen 80;
        server_name your-domain.com;

        location / {
            proxy_pass http://backend-server;  # 后端服务器的地址
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
    ...
}

    这里的 proxy_pass 指令将请求转发到 http://backend-server。你可以根据需要更改为你实际的后端服务器地址。

    proxy_set_header 指令用于设置转发请求时的 HTTP 头信息。

  3. 保存文件并退出编辑器。

  4. 测试配置是否正确：

    sql 复制代码 
    sudo nginx -t

  5. 重新加载 Nginx 配置：

    sql 复制代码 
    sudo systemctl reload nginx

3、验证代理设置

现在，你可以通过访问你的代理服务器地址来验证是否能够成功地将请求代理到后端服务器。例如，访问 http://your-domain.com，你应该能够看到来自 http://backend-server 的内容。

4、其他配置（可选）

根据需求，你可能还需要进行其他配置，例如：

  • 负载均衡： 如果你有多个后端服务器，可以使用 upstream 块来进行负载均衡。
  • SSL/TLS 加密： 如果你需要 HTTPS，可以配置 SSL 证书来加密代理流量。
  • 缓存： 配置 Nginx 缓存以提高性能。

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

修改 vue.config.js 文件：

javascript 复制代码 
// vue.config.js
module.exports = {
  devServer: {
    proxy: 'http://localhost:5000',  // 代理到你的后端服务器
    // 或者使用对象形式配置多个代理
    /*
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
    */
  },
};
相关推荐
Smile灬凉城6662 分钟前
反序列化为啥可以利用加号绕过php正则匹配
开发语言·php
南城巷陌8 分钟前
JWT认证机制在Node.js中的详细阐述
node.js·jwt认证机制·前端安全认证
乔峰不是张无忌33011 分钟前
【HTML】动态闪烁圣诞树+雪花+音效
前端·javascript·html·圣诞树
lsx20240613 分钟前
SQL MID()
开发语言
Dream_Snowar17 分钟前
速通Python 第四节——函数
开发语言·python·算法
西猫雷婶18 分钟前
python学opencv|读取图像（十四）BGR图像和HSV图像通道拆分
开发语言·python·opencv
鸿蒙自习室18 分钟前
鸿蒙UI开发——组件滤镜效果
开发语言·前端·javascript
m0_7482507426 分钟前
高性能Web网关：OpenResty 基础讲解
前端·openresty
言、雲26 分钟前
从tryLock()源码来出发，解析Redisson的重试机制和看门狗机制
java·开发语言·数据库
前端没钱1 小时前
从 Vue 迈向 React：平滑过渡与关键注意点全解析
前端·vue.js·react.js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）