跨域问题(CORS)

文章目录

  • 介绍
  • 解决
    • 一、添加跨域头,允许跨域
      • 1.后端配置CORS策略(4种方法)
      • 2.配置nginx
    • 二、代理

介绍

跨域资源共享(CORS, Cross-Origin Resource Sharing)是浏览器的一个安全机制,用来防止来自一个域的网页对另一个域下的资源进行请求。仅允许向 同域名同端口 的服务器发送请求。
对于前后端分离的项目,往往会有跨域问题。

解决

一、添加跨域头,允许跨域

1.后端配置CORS策略(4种方法)

浏览器检测到跨域请求时,会先发送一个预检请求(OPTIONS)给后端服务器,若后端配置了CORS策略,即返回允许的 CORS 头(如 Access-Control-Allow-Origin)来告诉浏览器它允许跨域请求。如果服务器未返回这些头,浏览器将阻止实际请求。如果预检请求成功,浏览器将继续发送实际的请求。如果服务器的响应中没有正确的 CORS 头,浏览器同样会阻止实际请求的返回数据。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.配置nginx

#跨域配置
location /api {add_header 'Access-Control-Allow-Origin' $http_origin;add_header 'Access-Control-Allow-Credentials' 'true';add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers '*';if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Origin' $http_origin;add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain; charset=utf-8';add_header 'Content-Length' 0;return 204;}
}

二、代理

代理的原理是,由于CORS检测只会在客户端进行,只需要前端的请求也是同域名同端口即可,前端发送请求到代理服务器,这个代理服务器和前端服务器的域名和端口一致,不会触发CORS,然后代理服务器再将请求转发给后端服务器即可。

开发环境: 前端使用代理,简化开发过程中的跨域问题。
代理的实质是转发请求,前端请求到代理时浏览器会认为是同源,不会触发跨域限制,之后代理服务器再将请求转发给后端服务器。
比如proxy.ts文件里的
在这里插入图片描述

生产环境:
可使用Nginx或其他反向代理服务器

location /api {proxy_pass http://127.0.0.1:8080;
}

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

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

相关文章

Linux操作系统在虚拟机VM上的安装【CentOS版本】

目录 准备工作 "CPU虚拟化"的方法 VMware的安装 Linux镜像文件的下载 开始安装 声明 新建虚拟机 安装CentOS7.6 配置Linux(CentOS7.6)操作系统 配置分区【学习者可以直接点击自动配置分区,不过还是建议学习一下手动分区】 分区原则 添加分区 …

提示工程颠覆:DSPy 引领全新范式革命

几个月前,我清楚地记得,Prompt Engineering 还是热门话题。就业市场上充斥着提示工程师的岗位,仿佛这是未来的必备技能。 然而,现在情况已经大不相同了。提示工程并不是一门艺术或科学,更像是“聪明的汉斯”现象——人类为系统提供了必要的背景,以便系统能更好地作出回应…

Maven聚合与继承

聚合 当我们一次想要构建多个项目时,而不是到每一个模块的目录下分别执行mvn命令。这个时候就需要使用到maven的聚合特性 这里第一个特殊的地方是packaging,值设置为pom。我们正常开发的其他模块中都没有声明packaging,默认使用了默认值jar&a…

【Qt】仿照qq界面的设计

widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug>//QT中信息调试类&#xff0c;用于输出数据&#xff0c;无需使用该类的实例化对象&#xff0c;直接使用成员函数即可 #include <QIcon>//图标类 #include <QPushButton&…

代码随想录——回文子串(Leetcode 647)

题目链接 我的题解&#xff08;双指针&#xff09; 思路&#xff1a; 当然&#xff0c;以下是对您提供的代码的解释&#xff1a; class Solution {public int countSubstrings(String s) {// 初始化回文子字符串的数量int count 0;// 遍历字符串的每个字符&#xff0c;使用…

综合评价 | 基于熵权-变异系数-博弈组合法的综合评价模型(Matlab)

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 根据信息熵的定义&#xff0c;对于某项指标&#xff0c;可以用熵值来判断某个指标的离散程度&#xff0c;其信息熵值越小&#xff0c;指标的离散程度越大&#xff0c; 该指标对综合评价的影响&#xff08;即权重&…

基于鸿道Intewell操作系统的运动控制系统方案

随着工业控制行业的蓬勃发展&#xff0c;操作系统实时与非实时业务的深度融合应用需求日益增长&#xff0c;特别是在Windows或Linux平台上处理机器视觉等复杂场景时&#xff0c;传统实时操作系统&#xff08;RTOS&#xff09;面临显著挑战。这些挑战主要体现在两方面&#xff1…

欢迎体验 tuya open-sdk for arduino

我们很高兴地宣布 tuya open-sdk 1.0.0 发布&#xff0c;tuya open-sdk 包括&#xff1a;https://github.com/tuya/tuya-open-sdk-for-device 和 https://github.com/tuya/arduino-tuyaopen 等多个系列&#xff0c;1.1.0 版本正在紧张开发中&#xff0c;敬请期待&#xff01; …

视频监控系统布局策略:EasyCVR视频汇聚平台构建高效、全面的安全防线

随着科技的飞速发展&#xff0c;视频监控系统已成为现代社会安全防范的重要组成部分&#xff0c;广泛应用于公共场所、企业园区、住宅小区等各个领域。一个科学合理的视频监控系统布局与选型策略&#xff0c;不仅能够显著提升安全监控的效率和效果&#xff0c;还能在关键时刻提…

DNN学习平台(GoogleNet、SSD、FastRCNN、Yolov3)

DNN学习平台&#xff08;GoogleNet、SSD、FastRCNN、Yolov3&#xff09; 前言相关介绍1&#xff0c;登录界面&#xff1a;2&#xff0c;主界面&#xff1a;3&#xff0c;部分功能演示如下&#xff08;1&#xff09;识别网络图片&#xff08;2&#xff09;GoogleNet分类&#xf…

揭秘Vue 2生命周期:从创建到毁灭的全面指南

Vue.js作为当前最受欢迎的前端框架之一&#xff0c;其生命周期方法是每个Vue开发者必须掌握的核心内容。下面将详细解释Vue2中的每个生命周期钩子的作用、概念和应用场景&#xff0c;并提供代码演示来进一步阐明其工作原理。以下是关于vue2中的生命周期每个参数的作用、概念、应…

海外网络加速方案:解决海外访问难题

随着全球化的浪潮不断推进&#xff0c;越来越多的人和企业开始涉足海外市场&#xff0c;寻求更广阔的资源与机遇。然而&#xff0c;在海外访问过程中&#xff0c;网络速度慢、连接不稳定等问题频繁出现&#xff0c;不仅影响了个人网络体验&#xff0c;更对企业的日常运营和国际…

【学术会议征稿】2024年第十届机械制造技术与工程材料国际学术会议(ICMTEM 2024)

2024年第十届机械制造技术与工程材料国际学术会议&#xff08;ICMTEM 2024&#xff09; 2024 10th International Forum on Manufacturing Technology and Engineering Materials 第十届机械制造技术与工程材料国际学术会议&#xff08;ICMTEM 2024&#xff09;将于2024年10月…

QT学习之计算器

网格布局初尝试&#xff0c;快速构建计算器 项目结构&#xff1a; wident.h拖动建立界面&#xff0c;20个button&#xff0c;一个lineedit 布局好后整体网格布局调整&#xff0c;依次给每个案件输入文本&#xff0c;并改objectname方便后期辨识 为了在lineedit显示数字&…

WPF性能优化之UI虚拟化

文章目录 前言一、VirtualizingStackPanel1.1 虚拟化功能介绍1、在Window中添加一个ListBox控件。2、在设计视图中用鼠标选中ListBox控件并右健依次单击“编辑其他模板”&#xff0d;“编辑项的布局模板”&#xff0d;“编辑副本”。3、查看生成的模板代码。 1.2 虚拟化参数介绍…

F12抓包04:(核心功能)Network接口抓包、定位缺陷

课程大纲 一、录制请求 ① tab导航选择“网络”&#xff08;Network&#xff09;&#xff0c;即可进入网络抓包界面&#xff0c;进入界面默认开启录制模式&#xff0c;显示浏览器当前标签页的请求列表。 ② 查看请求列表&#xff0c;包含了当前标签页执行的所有请求和下载的资…

分支管理

目录 创建分支 切换分支 合并分支 删除分支 合并冲突 创建分支 git branch [分支]指令 创建新的分⽀后&#xff0c;Git 新建了⼀个指针叫dev&#xff0c; * 表⽰当前 HEAD 指向的分⽀是 master 分⽀。另外&#xff0c;可以通过⽬录结构发现&#xff0c;新的 dev 分⽀…

保姆级教学:OC监听网络状态变化 Reachability监听网络变化 ios网络变化

本文主要讲解了,在oc开发中,怎么去使用代码进行网络监听,十分的通俗易懂。 首先,在xcode工程中导入SystemConfiguration框架。 然后导入Reachability.h文件。 Reachability文件 点击下载,也可以按照如下内容创建对应的文件。 Reachability.m //文件名Reachability.m …

多线程 | synchronized的简单使用

synchronized 关键字是 Java 中解决并发问题的一种常用方法&#xff0c;也是最简单的一种方法&#xff0c;其作用有三个: &#xff08;1&#xff09;互斥性&#xff1a;确保线程互斥的访问同步代码 &#xff08;2&#xff09;可见性&#xff1a;保证共享变量的修改能够及时可见…

探索Pyro4:Python中的远程对象通信艺术

文章目录 探索Pyro4&#xff1a;Python中的远程对象通信艺术背景&#xff1a;为何选择Pyro4&#xff1f;Pyro4是什么&#xff1f;如何安装Pyro4&#xff1f;简单的库函数使用方法场景应用示例常见Bug及解决方案总结 探索Pyro4&#xff1a;Python中的远程对象通信艺术 背景&…