跨域问题 及 解决

跨域(Cross-Origin Resource Sharing,CORS)是由浏览器的同源策略(Same-Origin Policy)引起的,同源策略是浏览器最基本的安全机制之一,用于防止恶意网站通过脚本等方式访问用户的私密信息。同源策略要求网页中的脚本只能与其所属的域名、协议和端口相同的资源进行交互,而不允许跨域访问。只要3者有一个不同,就跨域

什么是 协议、域名、端口号?

以https://www.baidu.com/ 为例

  • 协议:https://。指定了浏览器和服务器之间进行通信时所采用的规则。常见的协议包括 HTTP(超文本传输协议)和 HTTPS(安全超文本传输协议)。HTTP 是不加密的,而 HTTPS 则通过 SSL/TLS 加密数据传输,更安全。
  • 域名:www.baidu.com。域名是用于识别一个或多个 IP 地址的字符串。它们通常代表着一个网站、服务器或者网络资源的地址
  • 端口号:80。( 可以不写,默认80)端口是一个数字,用于标识网络通信中的不同服务或进程。在网页浏览器中,默认的 HTTP 端口是 80,而 HTTPS 的默认端口是 443。

跨域问题通常出现在以下情况下:

  1. 不同域名之间的访问:例如,一个页面的源是 http://example.com,但是通过 AJAX 请求访问了 http://api.example.org
  2. 不同协议之间的访问:例如,一个页面的源是 http://example.com,但是通过 AJAX 请求访问了 https://example.com
  3. 不同端口之间的访问:例如,一个页面的源是 http://example.com,但是通过 AJAX 请求访问了 http://example.com:8080

为了解决跨域问题,可以通过以下方式之一进行配置:

1. CORS(服务端配置)

在服务端设置 CORS 头部,允许指定的域名访问资源。以下是一个简单的 Node.js Express 示例:

const express = require('express');
const app = express();// 允许所有域名访问,可以根据需求进行设置
app.use((req, res, next) => {res.setHeader('Access-Control-Allow-Origin', '*');res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');next();
});// 示例路由
app.get('/data', (req, res) => {res.json({ message: 'Hello from the server!' });
});app.listen(3000, () => {console.log('Server is running on port 3000');
});

2. JSONP(客户端解决方案)

使用 JSONP(JSON with Padding)是一种跨域请求的解决方案,它利用 <script> 标签的 src 属性不受同源策略限制的特性。以下是一个简单的示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JSONP Example</title>
</head>
<body><script>function handleResponse(data) {console.log(data);}</script><script src="http://example.com/api/data?callback=handleResponse"></script>
</body>
</html>

Nginx 配置

在 Nginx 中配置跨域请求通常需要在服务器的配置中添加一些头部信息,例如:

location /api {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';add_header 'Content-Length' 0;add_header 'Content-Type' 'text/plain charset=UTF-8';return 204;}
}

以上配置示例中,Access-Control-Allow-Origin 设置为 * 表示允许所有域名访问,也可以根据需求设置特定域名。Access-Control-Allow-MethodsAccess-Control-Allow-Headers 用于指定允许的 HTTP 方法和头部信息。如果是 OPTIONS 请求,需要返回预检请求的响应。

请注意,具体的 Nginx 配置可能会因应用场景而有所不同,以上示例仅供参考。在配置时请确保充分了解各个选项的含义和影响。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/816132.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录算法训练营第三十五天|509.斐波那契数、70.爬楼梯、746.使用最小花费爬楼梯、62.不同路径

文档链接&#xff1a;https://programmercarl.com/ LeetCode509.斐波那契数 题目链接&#xff1a;https://leetcode.cn/problems/fibonacci-number/ 思路&#xff1a; 动规五部曲&#xff1a; 这里我们要用一个一维dp数组来保存递归的结果 1.确定dp数组以及下标的含义 d…

数据结构与算法的经典问题 — 背包问题

数据结构与算法 数据结构与算法是计算机科学中的两个核心概念&#xff0c;它们在软件开发和问题解决中起着至关重要的作用。 数据结构 数据结构是计算机中存储、组织和管理数据的方式&#xff0c;它能够帮助我们高效地访问和修改数据。不同的数据结构适用于不同类型的应用场…

【LeetCode热题100】【回溯】组合总和

题目链接&#xff1a;39. 组合总和 - 力扣&#xff08;LeetCode&#xff09; 要找一个和的所有组合&#xff0c;可以从每个数开始深度遍历&#xff0c;在包括自己本身下累加求和&#xff0c;不管行不行都回退状态 优化&#xff1a;每个数从本身开始深度遍历&#xff0c;因为前…

Leetcode 528 按权重随机选择

题目信息 LeetoCode地址: . - 力扣&#xff08;LeetCode&#xff09; 题目理解 想象题目提供的w数组里是很多根长短不一的棍子&#xff0c;然后我们将其按顺序排列成一条线。 然后我们扔一个沙包&#xff0c;砸中哪一根棍子&#xff0c;就代表命中了那根棍子代表的数字。很…

MYSQL索引失效精讲

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是小周同志&#xff0c;25届双非校招生Java选手&#xff0c;很高兴认识大家 &#x1f4d5;学习出处&#xff1a;本文是学自小林coding (xiaolincoding.com) 网站的MYSQL图解篇 &#x1f525;如果感觉博主的文章还不错的话…

韩顺平Java | C25 JDBC和连接池(上)

概述 JDBC概述&#xff1a;JDBC为访问不同数据库提供统一接口&#xff0c;为使用者屏蔽细节问题。Java程序员使用JDBC可以连接任何提供了JDBC驱动程序的数据库系统&#xff0c;从而完成对数据库的各种操作。 // 模拟代码 //JdbcInterface.java --Java规定的JDBC接口(方法) p…

redis的设计与实现(五)——独立功能

1. Redis的其他功能 redis 除了简单对对象的增删改查的功能之外&#xff0c;其实还有其他高级功能&#xff0c;了解这些内容有利于我们更灵活的使用 redis 完成我们的业务功能。 2. 发布与订阅 2.1. 基本概念 很多中间件都有发布与订阅功能&#xff0c;但是&#xff0c;作为一…

2023 E3 算法题第一题 (Difference Letter Count)

题的内容 Task 1 You are given a string letters made of N English letters. Count the number of different letters that appear in both uppercase and lowercase where all lowercase occurrences of the given letter appear before any uppercase occurrence. For exam…

在加载插件“sudoers_policy”时在 /etc/sudo.conf 第 19 行出错 的解决办法

背景 出现这个错误提示表明在加载sudoers_policy插件时遇到了问题&#xff0c;具体是在/etc/sudo.conf文件的第19行出现了错误&#xff0c;并且/usr/libexec/sudo/sudoers.so文件的所有权不正确&#xff0c;它必须属于用户ID为0的用户&#xff08;即root用户&#xff09; 解决…

文献阅读:LESS: Selecting Influential Data for Targeted Instruction Tuning

文献阅读&#xff1a;LESS: Selecting Influential Data for Targeted Instruction Tuning 1. 文章简介2. 方法介绍 1. Overview2. 原理说明 1. SGD上的定义2. Adam上的定义 3. 具体实现 1. Overview1. LoRA使用2. 数据选择3. LESS-T 3. 实验考察 & 结论 1. 实验设计2. 主…

UE5 在骨骼动画模型上绘制贴图

参考&#xff1a;Unreal 5.1 - How to paint damage textures and other effects on skeletal meshes 针对模型&#xff0c;在运行状态下通过射线指定一定范围&#xff0c;添加材质效果。 核心思路 通过射线获取命中点&#xff0c;作为材质参数材质中&#xff0c;命中的世界…

DP练习_P1002 [NOIP2002 普及组] 过河卒_python_蓝桥杯

P1002 [NOIP2002 普及组] 过河卒 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 1.DFS做超时40分 n, m, x, y map(int,input().split())flag [[0]*(n10) for _ in range(m10)] maps [[0]*(n10) for _ in range(m10)] d [[2,1],[2,-1],[-2,1],[-2,-1],[1,2],[1,-2],[-1,2]…

matlab 安装 mingw64(6.3.0),OPENEXR

matlab安装openexr 1. matlab版本与对应的mingw版本选择2. mingw&#xff08;6.3.0&#xff09;下载地址&#xff1a;3. matlab2020a配置mingw&#xff08;6.3.0&#xff09;流程“4. matlab 安装openexr方法一&#xff1a;更新matlab版本方法二&#xff1a;其他博文方法方法三…

【算法刷题 | 二叉树 06】4.10( 路径总和、路径总和 || )

文章目录 13.路径总和13.1问题13.2解法一&#xff1a;递归13.2.1递归思路&#xff08;1&#xff09;确定递归函数参数以及返回值&#xff08;2&#xff09;确定终止条件&#xff08;3&#xff09;确定递归逻辑 13.2.2代码实现 14.路径总和 ||14.1问题14.2解法一&#xff1a;递归…

HarmonyOS鸿蒙端云一体化开发--适合小白体制

端云一体化 什么是“端”&#xff0c;什么是“云”&#xff1f; 答&#xff1a;“端“&#xff1a;手机APP端 “云”:后端服务端 什么是端云一体化&#xff1f; 端云一体化开发支持开发者在 DevEco Studio 内使用一种语言同时完成 HarmonyOS 应用的端侧与云侧开发。 …

探索NDVI:了解植被指数的意义与应用

随着科技的进步和遥感技术的发展&#xff0c;我们能够更深入地了解地球上的植被覆盖情况&#xff0c;而其中一项重要的工具就是NDVI&#xff08;Normalized Difference Vegetation Index&#xff0c;归一化植被指数&#xff09;。NDVI不仅仅是一个数值&#xff0c;更是一扇窥探…

Keil开启代码提示功能

本文介绍Keil5开启代码提示功能。 进入这个 如此设置&#xff1a; 有的电脑的左边是空白栏&#xff0c;没有设置选项。应该如何解决呢&#xff1f; 找到MDK525安装包&#xff0c;其他版本的 Keil5 应该也可以。 用你的解压软件把它打开&#xff1a; 解压后会多出这些文…

python之字符串操作

1、切片操作 跟列表的切片很相似 代码示例 str1 chengxianzi996 print(str1[0:2]) print(str1[:10]) 代码解释&#xff1a;第一行&#xff1a;创建了一个字符串对象&#xff08;其中单引号和双引号都可以创建字符串&#xff09; 第二行提取前两个字符并输出 第三行输出s…

Linux LVM磁盘扩容

1、查看磁盘情况 df -h df -h2、查看逻辑卷 lvdisplay lvdisplay3、查看逻辑组 vgdisplay vgdisplay4、查看物理卷 pvdisplay pvdisplay5、查看磁盘 fdisk -l fdisk -l6、磁盘分区fdisk /dev/磁盘名 # 上一步查看到的新硬盘路径 fdisk /dev/vdb7、格式化磁盘mkfs -t ext4…

梯度提升树(Gradient Boosting Trees)

通过5个条件判定一件事情是否会发生&#xff0c;5个条件对这件事情是否发生的影响力不同&#xff0c;计算每个条件对这件事情发生的影响力多大&#xff0c;写一个梯度提升树&#xff08;Gradient Boosting Trees&#xff09;模型程序,最后打印5个条件分别的影响力。 示例一 梯…