Access to XMLHttpRequest at 'http://localhost:9999/account/login?account=wang&password=wang' from or

最新推荐文章于 2024-05-28 22:24:17 发布
最新推荐文章于 2024-05-28 22:24:17 发布
阅读量2.7k 收藏
点赞数
分类专栏： bug记录 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42821574/article/details/104926393
版权

Axios跨域的问题解决

Access to XMLHttpRequest at ‘http://localhost:9999/account/login?account=wang&password=wang’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

问题描述

当我尝试用axios请求后台的接口时候，请求成功到了后台，但是前台一直报错，被catch了
在这里插入图片描述
浏览器控制台一直出现如下错误：
在这里插入图片描述

解决办法

这是由于端口号不同引起的跨域，因为都是localhost，首先使用Jsonp的方法只能解决’GET‘方法的跨域问题。所以可以在前台使用代理的方式来解决。解决方案如下：
由于React的开发环境存在代理环境，只需要配置即可，在package.json的最下面加入：

"proxy": "http://localhost:9999"

在这里插入图片描述

Z山海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[js]轻便的XMLHttpRequest应用函数：downloadUrl()
10-30
这个函数利用了浏览器内置的 `XMLHttpRequest` 对象或在旧版本的 Internet Explorer 中使用的 ActiveXObject 来实现异步通信。以下是关于 `downloadUrl()` 函数的详细解释： 1. **参数说明**： - `url`：必填参数...
XMLHTTPRequest对象-XML/XSLT
09-24
XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新... 1、XMLHTTPRequest对象什么是？最通用的
控制台报错Access to XMLHttpRequest at ‘http://‘ from origin ‘http://‘ has been blocked by CORS policy
lph159的博客
03-21 3225
期初我是在写前端代码进行调试，其中用到了axios，打开控制台一直在报上面的错误，以为是跨域的问题，所以一直针对跨域问题进行调试，但是还是解决不了，后来发现我的前端代码有些小错误，axios的method后面是没有s的（我写成了methods），修正之后还是解决不了。在解决跨域问题的时候引入了一些其他依赖，我把依赖去除，问题解决了...绷不住了啊。依赖添加多了会出问题，我针对跨域去解决问题的时候，添加了如下依赖，导致控制台出错。axios的method不带s，所以一定要细心。这个问题，纠缠了我很久。
解决Access to XMLHttpRequest at ‘http://localhost:9091/login‘ (redirected from ‘http://localhost:9090/
一株木樨的博客
10-23 3731
解决Access to XMLHttpRequest at
【跨域问题】Access to XMLHttpRequest at‘http://localhost:解决跨域问题
最新发布
XING的博客
05-28 669
【代码】【跨域问题】Access to XMLHttpRequest at‘http://localhost:解决跨域问题。
ASP.NET Access to XMLHttpRequest at http://localhost 跨域问题解决
weixin_44313037的博客
06-08 1240
Web.Config中添加以下配置 <system.webServer> </system.webServer> 如果提示Access-Control-Allow-Origin 只能，only可以设置value的值。
vue跨域问题解决：Access to XMLHttpRequest at‘httplocalhost
m0_71981318的博客
07-27 2万+
前两天遇到了跨域问题，报了Access to XMLHttpRequest at‘httplocalhost的错，在网上找了一些资料，我是通过配置vue.config.js、proxy实现的，感觉非常方便，分享给大家！
Access to XMLHttpRequest at ‘http://localhost:9090/api/user‘ from origin ‘http://localhost:9876‘ has
m0_56843184的博客
01-28 1663
Access to XMLHttpRequest at ‘http://localhost:9090/api/user‘ from origin ‘http://localhost:9876‘ has
【java后端跨域问题cors】Access to XMLHttpRequest at ‘http://xxx:9000 ‘ No ‘Access-Control-Allow-Origin‘
i_see_the_world的博客
08-27 3567
Access to XMLHttpRequest at 'http://xxx:9000/list/selectRandomWord10?userId=1' from origin 'http://localhost:8080' has been blocked by COR allowedOrigins：设置能跨域访问我的域名，其中*号代表任意域名。 allowCredentials：是否允许携带cookie？默认情况下值为false。 allowMethod：接受的请求方式。 maxAge：本次许可.
XMLHttpRequest_test:XMLHttpRequest学习代码
05-20
XMLHttpRequest（XHR）是Web开发中的一个关键技术，它允许JavaScript在不刷新整个页面的情况下与服务器进行异步数据交换。这个技术对于实现动态网页和Ajax（Asynchronous JavaScript and XML）应用至关重要。...
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
10-21
主要介绍了jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下
ElementUI-Upload-qiniuyun:ElementUI的Upload上传到七牛云
05-15
七牛云服务器的储存区域 存储区域 地域简称 上传域名 华东 z0 服务器端上传：http(s)://up.qiniup.com 华东 z0 客户端上传： http(s)://upload.qiniup.com ...服务器端上传：http(s)://up-z1.qiniup.com ...
Access to XMLHttpRequest at ‘http://localhost/login/hello‘ from origin ‘http://127.0.0.1:5500‘ has b
m0_51346654的博客
06-03 2133
本文章仅用来记录课设所发生的错误，SpingBoot和js速成，因此遇到很多问题，仅具有参考性。 Access to XMLHttpRequest at ‘http://localhost/login/hello’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resourc...
【跨域问题】Access to XMLHttpRequest at'http://localhost:解决跨域问题
weixin_45560008的博客
09-26 6万+
注解实现方法： https://www.cnblogs.com/fanshuyao/p/7168471.html
【跨域问题】Access to XMLHttpRequest at'http://localhost:解决跨域问题，前后端连调，前端Vue后端SSM，解决Vue项目打包后打开页面图片不显示问题
热门推荐
OrangeChenZ的博客
01-14 22万+
问题： Failed to load resource: net::ERR_CONNECTION_REFUSED 这个问题我是因为后端服务没有启动，报错的； 跨域问题： Access to XMLHttpRequest at ‘http://localhost:9090/guidance/findGuidancePage’ from origin ‘http://localhost:8000’ h...
Spring Security 错误解决记录
Java Pro
03-24 756
前端返回需要Access-Control-Allow-Credentials 异常一 Access to XMLHttpRequest at 'http://localhost:9999/homeManager/user/login' from origin 'http://192.168.1.12:8000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the
【跨域问题】Access to XMLHttpRequest at ‘http://localhost:8080/login‘ from origin ‘http://localhost:80
cywleo的博客
04-10 5万+
vue 项目用 axios 进行请求的时候，总是报“Access to XMLHttpRequest at ‘http://localhost:8080/api/login’ from origin ‘http://localhost:8080……’”的错误 这属于跨域问题 解决方法： 找到项目的 config 下的 index.js 在 module.exports 中的 proxyTable 下添加下面的代码 proxyTable: { "/api":{ target: 'h
Access to XMLHttpRequest at‘httplocalhost跨域问题解决
m0_66557301的博客
03-08 4181
在vue.config.js里配置跨域请求 跨域问题报错 解决 在vue.config.js中配置 module.exports = { // 配置跨域请求 devServer: { port: 8080, host: ‘localhost’, open: true, https: false, proxy: { ‘/api’: { target: ‘http://需要请求的地址/’, ws: true, changeOrigin: true, pathRewrite: { ‘^/api’: ‘’ }
解决本地浏览器运行项目是的跨域问题（Access to XMLHttpRequest at ‘XXX‘ from origin ‘http://localhost:XX‘ has been block
专注后端开发
03-11 1681
解决本地浏览器运行项目是的跨域问题（Access to XMLHttpRequest at ‘XXX’ from origin ‘http://localhost:XX’ has been block
react 封装axios请求
04-24
React 封装 Axios 请求可以通过创建一个自定义的 Hook 来实现。下面是一个简单的例子： ``` import { useState, useEffect } from "react"; import axios from "axios"; const useAxios = (url) => { const [data, setData] = useState(null); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setIsLoading(true); try { const response = await axios.get(url); setData(response.data); } catch (error) { setError(error); } setIsLoading(false); }; fetchData(); }, [url]); return { data, isLoading, error }; }; export default useAxios; ``` 上面的代码中，useState 用来存储请求结果和错误信息，useEffect 用来发送请求并更新状态。最后，useAxios Hook 返回一个包含请求结果和状态的对象，供其他组件使用。使用时，只需调用 useAxios(url) 即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值