Ajax调用API接口跨域报错

最新推荐文章于 2024-06-03 14:03:09 发布
最新推荐文章于 2024-06-03 14:03:09 发布
阅读量735 收藏
点赞数
分类专栏： Ajax 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46040294/article/details/115176135
版权

错误描述：

在使用ajax调用api接口的时候，报错如下:

Access to XMLHttpRequest at 'http://xxx.com/api/xxx' fromorigin 'null' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

错误代码如下：

$(function() {
   
	$.post('http://xxx.com/api/xxx', {
   }, function
最低0.47元/天 解锁文章
想吃柚子.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax 跨域访问web api,web api 解决Ajax请求跨域问题
weixin_30043049的博客
08-05 744
前端ajax请求接口时，经常出现跨域问题，当然了解决方法有很多种，比如：我本人恰好前后端都会一点，所以直接在接口端处理。 我用的是mvc 开发的接口 可以在web API 的根目录添加一个属性就OK了。 代码如下：public class CrossSiteAttribute: System.Web.Http.Filters.ActionFilterAttribute{private string...
【跨域问题】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...
axios发送post请求，postman测试跨域完全正常（后台没有跨域限制的情况），但浏览器测试始终出现跨域问题，亲测有效的解决方法！！
最新发布
weixin_45814547的博客
06-03 260
如果后台没有跨域限制，点击Send结果中会出现orgin相关的信息，说明后台配置中没有限制，是可以正常访问的，我们可以从前端axios的传输中寻找解决办法，但如果未出现此类信息，请先从后端寻求解决方法。我们返回到postman界面，可以看到使用post提交时，选择了x-www-form-urlencoded,这就要求后台希望我们传递过去的是一个键值对的格式，我们需要手动将传递的参数格式进行转换。首先使用postman测试跨域，也就是在Headers头部中增加一个Orgin选项，输入一个其他域名。
【会导致跨域问题的原因】Access to XMLHttpRequest at‘http://localhost:
xzxailh的博客
10-15 8933
如果项目所有的功能都不能用或者是部分模块的的全部功能不能用，大概率是nginx的问题。1. 如果使用nginx，查看nginx配置文件是否配置后端的请求端口路径。2. 查看后端的controller层是否有@CrossOrigin 注解。如果模块中只有一个功能会报跨域问题，大概率是请求方式和路径不一致导致的。3. 查看前端的请求方式与后端是否一致，查看路径是否一致。以上内容都会导致产生跨域问题。
Vue2前端请求API数据跨域问题解决
woshinsy的博客
04-11 2770
Access to XMLHttpRequest at 'http://localhost:9090/echarts/members' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.跨域问题解决
Vue调用后端api接口出现跨域问题，只要三步解决问题
半生程序员的搬砖历程
04-30 3063
问题： 当我们在自己的个人电脑上去进行vue调用后端的操作时，经常会遇到跨域问题。1.在Vue项目中调用api接口的地方加上。3. 在控制类方法上加上允许跨域的注解。2.在后端代码项目重写Filter类。
浅谈Ajax跨域Session和跨域访问
12-02
然而，随着Web服务的开放和API接口的广泛使用，跨域请求的需求变得日益普遍。 一、Ajax跨域请求与JSONP JSONP（JSON with Padding）是一种常见的解决跨域问题的方法，尤其在不支持CORS（跨源资源共享）的旧版...
ajax跨域访问WCP搜索，返回JSON数据
08-14
标题中的“ajax跨域访问WCP搜索，返回JSON数据”涉及到的是Web开发中关于AJAX、跨域资源共享（CORS）以及JSON数据格式的应用。在Web应用中，AJAX（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况...
跨域请求解决方案
04-17
JSONP是一种古老的跨域解决方案，适用于支持GET请求的API。它通过动态创建`<script>`标签来加载跨域的JavaScript资源。服务器返回的不是JSON数据，而是JavaScript函数调用，带有返回的JSON数据作为参数。例如，...
Jquery Ajax Error 调试错误的技巧
11-22
url: 'your-api-url', type: 'GET', error: function(xhr, textStatus, errorThrown) { console.log('Error:', textStatus, ', Details:', errorThrown); // 这里可以添加对错误的处理逻辑，如显示错误信息、...
ajax检测用户名
12-08
在实际开发中，我们可能会使用更高级的库或框架，如 jQuery、axios 或 Fetch API 来简化 AJAX 调用。例如，使用 jQuery，上述过程可以简化为： ```javascript $.ajax({ type: 'POST', url: '/check_username', ...
前端跨域问题的解决方案Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy
热门推荐
weixin_40756509的博客
03-25 27万+
前言： 在前端发出Ajax请求的时候，有时候会产生跨域问题，报错如下: Access to XMLHttpRequest at 'http://127.0.0.1/api/post' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 针对以上问题，本文提供两种解决方案，CORS中间件和JSO
ajax出现Access to XMLHttpRequest at “ “from origin ‘null‘ has been blocked by CORS policy:
m0_52007955的博客
05-20 3048
一、在服务端加上响应头response.setHeader('Access-Control-Allow-Origin','*'); 简单允许跨源。 二、请求的路径没有完整。完整的路径 HTTP://127.0.0.1/端口号/文件路径。 三、请求方式在服务端没有相应的响应代码。比如post请求，服务端要有post响应。 上面都没问题，相信你也解决了，觉得对你有用，帅哥美女点个赞吧！ ...
ajax跨域请求html页面6,Ajax 跨域请求 Access to XMLHttpRequest 解决方案
weixin_39730671的博客
06-04 973
错误提示Access to XMLHttpRequest at 'http://localhost:8080/api/user/login' from origin 'http://localhost解决方案1. HTML 页面ajax 请求加入 contentType: "application/x-www-form-urlencoded"请求如下：$.ajax({type: "post",ur...
Ajax基础简介原理
qq_45802159的博客
11-23 197
Ajax Ajax是Asynchronous Javascript And XML（异步JavaScript和XML）的缩写。 Ajax技术描述了使用脚本操纵HTTP和Web服务器进行数据交换，在页面不刷新的情况下，实现页面的局部更新。是指一种创建交互式网页应用的网页开发技术。 注意： Ajax = 异步 （JavaScript) 和 XML）。 Ajax 是一种用于创建快速动态网页的技术...
ajax 对接口,ajax访问api接口
weixin_30746067的博客
08-05 1614
ajax访问api接口 内容精选换一换访问控制策略是API网关提供的API安全防护组件之一，主要用来控制访问API的IP地址和帐户，您可以通过设置IP地址或帐户的黑白名单来拒绝/允许某个IP地址或帐户访问API。访问控制策略和API本身是相互独立的，只有将访问控制策略绑定API后，访问控制策略才对绑定的API生效。每个用户最多可以创建100个访问控制策略。同一个环境中一个AP访问控制可控制访问AP...
https网站ajax调用http网站遇到的问题
xiao__xf的博客
04-20 2625
https网站由于加密，所以在html页面使用ajax调用http接口是会出现 "已阻止载入混合活动内容" 的报错信息，这时候我们需要在https网站后台创建http代理页面来解决此问题。 具体过程： 1、在https网站创键后台接口a1，此后台接口a1调用http网站的http接口b1； 2、https网站的html页调用后台接口a1; ...
ajax失败的原因,使用https协议失败的ajax请求失败的可能原因但http工作
weixin_33477290的博客
08-05 1203
目前我正在为Linux环境下基于codeigniter和apache的站点安装https。使用https协议失败的ajax请求失败的可能原因但http工作但是一个页面需要通过jQuery ajax请求从同一站点发送三个页面，但是无法从这三个源获取内容。在Chrome控制台中显示以下消息。Failed to load resource: net::ERR_CONNECTION_RESET或Faile...
Uniapp uploadfile 跨域报错
07-20
Uniapp中使用uni.uploadFile进行文件上传时，如果涉及跨域请求，可能会出现跨域报错。解决跨域问题的方法有以下几种： 1. 在服务器端设置允许跨域访问：在服务器端的响应头中添加Access-Control-Allow-Origin字段，允许指定的域名或通配符（*）进行跨域访问。 例如，在Node.js的Express框架中，可以使用cors库来设置允许跨域访问： ```javascript const express = require('express'); const cors = require('cors'); const app = express(); app.use(cors()); // 处理文件上传的路由 app.post('/upload', (req, res) => { // 处理文件上传的逻辑 }); // 启动服务器 app.listen(3000, () => { console.log('服务器已启动'); }); ``` 2. 使用代理服务器：在uniapp的`config.js`配置文件中，可以配置一个代理服务器，将跨域请求转发到服务器端，从而避免跨域问题。 在`config.js`文件中添加以下代码： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://example.com', // 实际请求的接口地址 changeOrigin: true, pathRewrite: { '^/api': '' // 如果请求的接口路径有前缀，需要将其替换为空字符串 } } } } } ``` 然后，在uniapp中使用`uni.uploadFile`时，将请求的地址设置为`/api/upload`，例如： ```javascript uni.uploadFile({ url: '/api/upload', // 其他参数... }); ``` 这样，uniapp会将`/api/upload`的请求转发到`http://example.com/upload`。 3. 使用JSONP请求：如果服务器端支持JSONP跨域请求，可以将文件上传接口改为支持JSONP，并在uniapp中使用uni.request进行请求。 在服务器端将文件上传接口改为支持JSONP： ```javascript app.get('/upload', (req, res) => { const callback = req.query.callback; const result = { code: 0, message: '上传成功' }; const jsonpResult = `${callback}(${JSON.stringify(result)})`; res.send(jsonpResult); }); ``` 然后，在uniapp中使用uni.request进行请求： ```javascript uni.request({ url: 'http://example.com/upload', method: 'GET', dataType: 'jsonp', success(res) { console.log('文件上传成功', res.data); }, fail(err) { console.error('文件上传失败', err); } }); ``` 以上是解决Uniapp中使用uni.uploadFile跨域报错的几种方法，根据你的实际情况选择合适的方法进行处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值