React项目跨域问题的解决

最新推荐文章于 2024-06-22 16:06:24 发布
最新推荐文章于 2024-06-22 16:06:24 发布
阅读量852 收藏 1
点赞数 1
分类专栏： 前端技术基础 文章标签： javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39088036/article/details/109198363
版权

问题描述

运行React项目，前端发请求给后台，报如下错误：
No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方法：

（1）方案一：在后台的controller处添加注解@CrossOrigin

（2）方案二：利用Nginx进行代理

Nginx的使用教程可以在网上查询，这里不再详细描述

最后什么叫做跨域名，给一篇参考博客的链接：https://www.cnblogs.com/cxygg/p/12419502.html

eat_Cookie
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
正确解决No ‘Access-Control-Allow-Origin’ header is present on the requested resource异常的有效解决方法
wbajsjhhhhh的博客
05-03 7836
正确解决No ‘Access-Control-Allow-Origin’ header is present on the requested resource异常的有效解决方法
React项目中请求跨域解决方法
weixin_44071181的博客
06-01 1123
react项目请求跨域问题
[转载]React跨域新版解决方案（v16.9）
jamey8383的专栏
05-09 276
https://segmentfault.com/q/1010000012732581 //package.json中加入 //some scripts , "proxy": { "/api/RoomApi": { "target": "http://open.douyucdn.cn", "changeOrigin":true }, "/api/v1":{ "target":"http://capi.douyucdn.cn", .
完美解决：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
white0718的博客
07-24 1万+
分析：当我们请求一个接口的时候，出现如：Access-Control-Allow-Origin 字眼的时候说明请求跨域了。前端是vue,后端是springcloud，完全的前后端分离的项目，前端在向后端发送请求的时候出现如下的错误。把我工作中遇到的问题和解决的问题的过程记录下来，同时希望也可以帮到大家！文件，在该文件内新增配置。
react中请求跨域报错
最新发布
weixin_65280610的博客
06-22 366
解决方法：通过配置react的反向代理，找到react-app的脚手架的地址，通过创建一个setupProxy.js文件，然后将官网的脚手架地址粘贴复制到文件中，最后下载一下它的依赖就可以了。
No 'Access-Control-Allow-Origin' header is present on the requested resource'， 跨域访问的解决方法
热门推荐
木子叶的奔跑
11-13 33万+
当请求不在同一域名下的资源文件（ip地址+端口号）时，会报如下错误： “No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.”，翻译下，因为被请求的资源没有设置 ‘A...
No 'Access-Control-Allow-Origin' header is present on the requested resource. 跨域问题！
开心就好~~~专栏
01-23 18万+
跨域问题项目背景车祸现场解决问题总结 项目背景 前端：VUE 后端：Java JDK 1.8 Springboot 1.5.12 maven 3.3.9 服务器环境：Linux nginx 数据库：mysql 车祸现场 1、废话不说直接上干货 仔细一点可以看出，No ‘Access-Control-Allow-Origin’ header is present on the requested...
解决跨域问题：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.
一起加油吧！
12-10 7345
CORS，全称Cross-Origin Resource Sharing，是一种允许当前域（domain）的资源（比如html/js/web service）被其他域（domain）的脚本请求访问的机制，通常由于同域安全策略（the same-origin security policy）浏览器会禁止这种跨域请求。
react 解决跨域问题
缚己
03-29 4627
<p>react 仅仅关注数据本身，没有发起网络请求的功能，需要借助 ajax 发起数据请求，推荐使用 axios</p> <p>使用 react 做开发，开放模式往往是前后端分离，如果后端没有配置允
详解Springboot+React项目跨域访问问题
08-26
总结起来，Springboot+React项目中的跨域问题可以通过CORS过滤器或者前端代理服务器来解决。理解并正确实施这些解决方案，有助于构建安全且高效的前后端分离应用。在实际开发中，应根据项目需求和环境选择合适的方法...
react axios 跨域访问一个或多个域名问题
08-19
React Axios 跨域访问一个或多个域名问题是前端开发中的一种常见问题，该问题的解决方法有多种，本文将详细介绍 React Axios 跨域访问一个或多个域名问题的解决方法。 React Axios 跨域访问一个域名 首先，我们...
React+Spring实现跨域问题的完美解决方法
08-27
在开发Web应用时，跨域问题常常困扰开发者，特别是在React前端和Spring后端结合的项目中。跨域是由浏览器的同源策略所引起的，限制了JavaScript从不同的源加载资源。本文将详细介绍如何在React和Spring环境中解决这...
React如何解决fetch跨域请求时session失效问题
10-17
本文将详细介绍React如何解决fetch跨域请求时session失效的问题。 首先，fetch API在React中作为XMLHttpRequest的替代品，提供了更简洁和高效的接口。fetch的核心在于对HTTP接口的抽象，包括Request、Response、...
React跨域解决方案
工宗浩生财指南针
04-05 1803
看到网上举的一个形象例子，先设想下，如果允许跨域，那么黑衣人是不是可以在自己的网页上把请求转发给其他网站？例如，黑衣人在自己的页面设计了一个跨域请求到某钱堆的网址，当用户访问黑衣人网址时，浏览器按照黑衣人设计去访问了钱堆（还携带了用户在钱堆那儿的cookie）......之后，之后警察叔叔们又要加班了。获取的IP信息：var returnCitySN = {"cip": "117.136.83.208", "cid": "CN", "cname": "CHINA"};是的，错误的原因就是你跨域了。
Access-Control-Allow-Origin:*不生效
ssk0411的博客
11-18 1万+
前端附带身份凭证的请求，所以服务器Access-Control-Allow-Origin 不能设为* 附带身份凭证的请求与通配符 对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“*”。 这是因为请求的首部中携带了 Cookie 信息，如果 Access-Control-Allow-Origin 的值为“*”，请求将会失败。而将 Access-Control-Allow-Origin 的值设置为 http://foo.example，则请求将成功执行。
react跨域 完美篇
csdnyp的博客
04-21 1418
react的跨域、跨域的注意事项 ==================================================================== 首先查看react项目的版本，>2时使用以下完成跨域 其实现在你创建一个项目，几乎都是>2的版本了，不信你查查看 1、查看版本 create-react-app -V 2、我们先来看看后端的跨域（要注释掉，不然你做啥react跨域） app.use(function (req, res, next) { res.he
后台解决跨域问题
m1s2q3l4的博客
02-18 477
出现的问题 解决办法： 1.创建工具类 2.进行实现 package com.shoppingbackstage.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.cors.CorsConfiguration; import org.springframew
react 跨域配置
couch potato的博客
08-06 428
1、单个跨域 package.json中 "proxy":"https://192.168.6.32:3000" 2、配置多个，使用插件 http-proxy-middleware http-proxy-middleware 插件官网文档 安装： npm install http-proxy-middleware --save # or yarn add http-proxy-middleware 使用： react项目中，src目录下新建 setupProxy.js，内容如下 const { cr
跨域请求常见错误及解决：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
二饭的博客
12-14 1万+
我的项目是Vue+Boot前后端分离项目。出现标题的错误信息的可能如下： 第①种情况 后端没有设置跨域，这里以Boot项目为例，在类上使用如下注解：表示这个类中的方法都可以进行跨域 @RestController @RequestMapping("client/recruit") @CrossOrigin public class RecruitClient { } 第②种情况 后端拦截器或过滤器中没有允许该请求方法通过，正确写法如下：拦截器示例 response.setHeader("Access-
解决react项目中跨域和axios封装使用
05-19
在 React 项目中，可以通过配置代理来解决跨域问题。在 package.json 文件中添加如下代码： ``` "proxy": "http://api.example.com" ``` 这里将代理地址设置为 http://api.example.com ，当发送请求时，axios 会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值