服务端（后端），前端支持跨域请求

已于 2022-03-16 18:06:55 修改
阅读量4k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： cors跨域请求 文章标签： nginx vue.js https
于 2021-11-12 21:39:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43140505/article/details/121296226
本文详细讲述了前端项目如何通过XMLHttpRequest实现跨域请求，以及后端使用SpringBoot和Nginx配置支持跨域的方法。重点介绍了`Access-Control-Allow-Origin`头的作用，并揭示了options预请求的机制。最终提供了解决Apache服务器开启跨域失败的建议和常见错误排查步骤。

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

服务端（后端），前端支持跨域请求

几种支持跨域请求的方式 解释的很简单
几种支持跨域请求的方式
在这里插入图片描述
后来发现 nginx转发和解决跨域 更好 具体的解决方案可以搜索nginx解决跨域
核心都是 header增加’Access-Control-Allow-Origin

报错：
Access to XMLHttpRequest at 'localhost:8080/ rom origin ‘null’ has been blocked by CORS policy:

原因：我的前端项目没有支持跨域请求；
解决：
1.前端项目支持跨域请求：如果部署在apache服务器上，要在apache服务器上开启允许跨域请求，我安装教程做了，但是没有成功，大牛们可以自己搜下 apache（或者其他的服务器）开启跨域请求的方法
我是用的XMLRequest发送 的请求，手动在header中加入跨域请求头
在这里插入图片描述
如果成功的标记就是
在这里插入图片描述
请求头header中有这个字段 之后浏览器会自动的测试后端是否支持跨域请求，也就是发一个option方法，如果成功响应，就代表服务器端支持

报错：Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

2.后端支持跨域请求
这个时候报错，就是后端没有支持跨域请求；

1.全局配置支持跨域请求：（如果是有反向代理，可以搜一下nginx配置负载均衡）
我的项目是springBoot项目，大家可以搜一下springBoot支持跨域请求：就是写一个过滤器，在response中手动添加上Access-Control-Allow-Origin （ 这是判断服务端是否支持跨域请求的标志）。

当然也可以手动的在你要支持跨域请求的接口中，在response header中加入Access-Control-Allow-Origin头 ，value为* 这样基本就完成了后端支持跨域请求

3.记录一下坑 （做完2之后，一直还是请求不过）

在这里插入图片描述
可以看到浏览器已经自动的支持跨域请求，options方法就是浏览器自动判断后端是否支持跨域请求，如果有响应就是服务端支持，不成功就如图，证明不支持跨域响应。当时我用postman给我 的接口发GET请求，响应头是有Access－control－allow－origin的，但是浏览器自己生成的请求确没有这个响应头，后来查资料，options为预请求，判断是否支持，而我的代码是＠ＧｅｔＭａｐｐｉｎｇ　,也就是只有get请求，才会加响应头，options方法根本进不到接口中。
在这里插入图片描述

把@GetMapping 改成@RequestMapping就好了 或者说支持Options方法和接口接受的请求方法。

在这里插入图片描述

最后就完美解决了

服务端允许跨域
c785795635的专栏
01-19 316
跨域 cors http
关于后端允许跨域后，axios的post请求仍显示跨域问题
小小前端
12-12 3292
文章目录问题解决 问题 我们后端 PHP 已经设置了允许跨域： header("Access-Control-Allow-Origin: *"); header('Access-Control-Allow-Methods:POST, GET, OPTIONS'); 但我们用 axios 进行 post 请求时仍会显示跨域 axios.post("请求路径",{ name: 'zhangsan...
服务支持跨域请求的配置
08-08
服务支持跨域请求的配置服务支持跨域请求的配置服务支持跨域请求的配置服务支持跨域请求的配置
跨域问题
weixin_34205826的博客
07-22 280
2019独角兽企业重金招聘Python工程师标准>>> ...
掌握nginx配置以支持跨域携带cookie
最新发布
weixin_42153793的博客
06-30 1138
跨域资源共享（Cross-Origin Resource Sharing，简称CORS）是一种安全机制，允许一个域的Web应用去访问另一个域的资源。随着Web应用变得越来越复杂，前端开发者常常会遇到需要从不同源获取数据的场景。由于浏览器的同源策略，直接跨域请求通常会被阻止，CORS就在此背景下应运而生，为这种跨域请求提供了标准的解决方案。CORS引入了HTTP响应头字段来指定哪些源可以访问资源，哪些不可以。它不仅限于简单请求，也适用于预检请求、携带凭证的请求等复杂场景。
服务器端解决跨域问题的三种方法
热门推荐
技术博客
03-01 4万+
服务端解决跨域请求
java web服务器实现跨域访问
yjph83的专栏
11-02 492
原文： http://my.oschina.net/tbaby/blog/501333 http://www.shaoqun.com/a/106409.aspx http://blog.csdn.net/newjueqi/article/details/27058765 http://blog.csdn.net/ye1992/article/details/43487623   一...
服务端配置实现AJAX跨域请求
10-24
AJAX跨域请求是Web开发中经常会遇到的问题，尤其在前后端分离的项目中，前端往往需要从前端部署的域名发起请求到后端API服务器，而这两个服务器可能属于不同的域名，这就会涉及到跨域问题。浏览器出于安全原因，同源...
前端后端跨域问题
01-02
WebSocket协议支持全双工通信，允许客户端和服务端双向发送消息，并且支持跨域。这种技术不仅提升了实时通信的能力，而且简化了开发流程。 ### HTML5的新特性简介 除了跨域解决方案外，HTML5还引入了许多新特性，...
Springboot解决ajax+自定义headers的跨域请求问题
10-16
总结，Spring Boot通过提供对`@CrossOrigin`注解和自定义`CorsFilter`的支持，使得处理跨域请求变得简单而灵活。无论是针对特定接口还是全局配置，都能有效解决AJAX请求，包括带有自定义headers的跨域问题。正确配置...
Python Tornado之跨域请求与Options请求方式
09-17
在前后端分离的开发模式下，Tornado作为后端服务，需要处理来自不同源的跨域请求，这涉及到浏览器的同源策略和CORS（Cross-Origin Resource Sharing）机制。 跨域请求是指前端应用（如Vue）尝试从不同的源（域名、...
配置服务端支持跨域所应用到的jar包
03-02
配置服务端支持跨域所应用到的jar包，另外还需要进行一些配置。详见我的博客“服务器端解决跨域问题的三种方法”
实现支持跨域请求
qq_37809967的博客
09-20 208
实现支持跨域请求全局通过配置CorsFilter(跨域请求过滤器)实现支持跨域单个请求的跨域支持通过 @CrossOrigin 注解来实现 全局通过配置CorsFilter(跨域请求过滤器)实现支持跨域 @Configuration public class GlobalCorsConfig { @Bean public CorsFilter corsFilter() { final UrlBasedCorsConfigurationSource urlBasedCorsCo
服务端设置跨域
Evita
05-06 450
前言 本文主要介绍服务端设置跨域的方式。 正文 1、首先看一下在没有设置允许跨域的时候，从A站点请求B站点的数据，会被浏览器拦截。 跨域拦截.png 2、服务端设置允许跨域 服务端使用lighttpd，修改lightpd配置文件，修改点入下图，然后重启lighttpd服务 setenv.add-response-header += ("Access-Control-Allow-Ori...
如何支持跨域请求
大叶子不小的博客
11-19 255
在Controller中看到@CrossOrigin ，这是什么？有什么用？为什么要用？ what？ @CrossOrigin是用来处理跨域请求的注解 先来说一下什么是跨域： （站在巨人的肩膀上） 跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。 所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子： http://www.123.com/index.html 调用 http://www.123....
服务端进行跨域处理
qq_41158525的博客
05-24 416
服务端进行跨域处理 @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry //过滤所有请求 .addMapping("*/**") .allowedOrigins("*", "null") //是否支持跨域Cookie .
PHP服务端允许跨域
baidu_33055905的博客
08-13 887
PHP服务端允许跨域 加上需要允许跨域访问，配置如下（一下配置内容前不允许有其他任何输出操作）： //设置允许跨域的 请求源地址 //方式一： header("Access-Control-Allow-Origin: *"); //允许所有地址跨域请求 //方式二： header("Access-Control-Allow-Origin: http://localhost:8080"); //指定某个地址可以跨域请求，这里只能指定一个 //方式三：如果要允许多个地址跨域请求可以这样写 $origin = [
后端接口允许跨域访问
qq_33192454的博客
07-17 1156
为了在后端接口中允许跨域访问（CORS），你需要在你的Spring Boot项目中配置CORS。
php 服务端允许跨域访问
weixin_30709809的博客
04-03 533
加上需要允许跨域访问，配置如下（一下配置内容前不允许有其他任何输出操作）： //设置允许跨域的 请求源地址//方式一：header("Access-Control-Allow-Origin: *");//允许所有地址跨域请求//方式二：header("Access-Control-Allow-Origin: http://localhost:8080");//指定某个地址可以跨域请...
前端设置跨域请求头
03-22
<think>好的，我现在需要帮用户解决关于前端设置跨域请求头的问题。首先，我得回想一下用户之前的问题，他之前问过预检返回204的情况，现在继续询问前端如何设置跨域请求头。这说明用户可能正在处理跨域问题，尤其是前端配置部分。 用户可能的前置知识：已经了解预检请求和CORS的基本概念，但需要具体的实现方法。他们可能遇到了跨域请求被浏览器拦截的情况，想知道如何在前端正确配置请求头来解决这个问题。 我需要先解释前端在跨域中的角色。跨域请求的安全限制是由浏览器实施的，前端无法直接绕过，但可以通过设置某些请求头来触发预检请求，并让服务器正确处理。不过，用户可能误以为前端可以完全解决跨域问题，需要指出前端设置的局限性，强调服务器配置的必要性。 接下来，我需要列出前端可以设置的请求头，比如Content-Type、Authorization等，并说明这些设置可能触发的预检流程。同时，需要提供具体的代码示例，比如使用fetch或XMLHttpRequest时的设置方法，帮助用户实际操作。 还要区分简单请求和非简单请求，解释哪些情况下需要预检，这样用户能理解为什么某些设置会导致预检请求。此外，需要提醒用户常见的误区，比如前端无法单独解决跨域问题，必须服务器配合，以及避免设置不允许的请求头导致预检失败。 最后，总结关键点，强调服务器配置的重要性，并给出检查步骤，比如使用开发者工具监控请求，确保服务器返回正确的CORS头。这样用户能系统地排查问题，而不是仅仅依赖前端设置。</think>以下是关于**前端设置跨域请求头**的详细说明，分为关键原理、实践方法和常见误区： --- ### 一、跨域请求的核心限制 1. **浏览器安全策略** - 浏览器默认遵循**同源策略**，禁止跨域请求（协议、域名、端口任一不同即为跨域）。 - **前端无法直接绕过此限制**，需依赖**服务端协作**（通过CORS响应头）。 2. **前端角色的局限性** - 前端只能**触发跨域行为**（如发送请求），但**不能通过设置请求头直接解决跨域问题**。 - 跨域是否成功，最终由**服务器返回的CORS响应头**决定。 --- ### 二、前端可设置的请求头及作用 #### 1. 简单请求（无需预检） - **定义**：满足以下条件的请求： - 方法为 `GET`/`POST`/`HEAD` - 请求头仅包含：`Accept`、`Accept-Language`、`Content-Language`、`Content-Type`（仅限 `text/plain`、`multipart/form-data`、`application/x-www-form-urlencoded`） - **前端设置示例**： ```javascript // 使用 fetch fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' // 简单请求允许的类型 } }); ``` #### 2. 非简单请求（需预检） - **触发场景**： - 方法为 `PUT`/`DELETE` 等 - 设置自定义头（如 `Authorization`） - `Content-Type` 为 `application/json` - **前端设置示例**： ```javascript // 自定义请求头触发预检 fetch('https://api.example.com/data', { method: 'PUT', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer token123' // 非简单请求头 } }); ``` - 浏览器会自动发送 `OPTIONS` 预检请求，验证服务端是否允许这些头和方法的组合。 --- ### 三、前端需配合的关键操作 #### 1. 携带凭证（如Cookie） - **设置 `credentials`**：显式声明请求是否携带凭证： ```javascript fetch('https://api.example.com/auth', { credentials: 'include' // 或 'same-origin' }); ``` - 服务端需返回 `Access-Control-Allow-Credentials: true` 且 `Access-Control-Allow-Origin` 不能为 `*`。 #### 2. 处理预检失败 - **错误类型**：若服务端未正确配置CORS，浏览器会报错如： ```text Access to fetch at 'https://api.example.com' from origin 'https://your-site.com' has been blocked by CORS policy. ``` - **解决方案**：需后端配置允许的源、方法和头（见下文服务端示例）。 --- ### 四、服务端必须配合的配置 #### 1. 基本CORS响应头（以Node.js为例） ```javascript app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', 'https://your-frontend-domain.com'); // 或 * res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); res.setHeader('Access-Control-Allow-Credentials', 'true'); // 若需携带凭证 next(); }); ``` #### 2. 预检请求处理 - 显式响应 `OPTIONS` 请求： ```javascript app.options('/api/data', (req, res) => { res.sendStatus(200); // 返回预检成功 }); ``` --- ### 五、常见误区 1. **前端单独解决跨域** - 错误做法：尝试在前端代码中覆盖 `Origin` 头（浏览器会阻止此行为）。 - 正确做法：必须由服务端返回CORS响应头。 2. **忽略预检请求** - 若请求包含非简单头或方法，服务端未处理 `OPTIONS` 请求，会导致实际请求被拦截。 3. **滥用通配符 `*`** - `Access-Control-Allow-Origin: *` 不允许与 `Access-Control-Allow-Credentials: true` 同时使用。 --- ### 六、总结 - **前端职责**：设置合理的请求头（如 `Content-Type`、`Authorization`），触发正确的预检流程。 - **后端职责**：返回合法的CORS响应头，允许指定源、方法和头。 - **验证工具**：通过浏览器开发者工具的 **Network** 标签检查请求和响应头。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值