`
阅读更多

问题报错:

Access to XMLHttpRequest at 'http://localhost:3030/api/asset-list' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field lang is not allowed by Access-Control-Allow-Headers in preflight response.  

问题解析:

前端服务器fetch.js请求后端服务器api报跨域问题 前端服务器:3000,后端服务器:3030,KOA2 由于前端请求的header字段未在服务器端运行,导致请求跨域报错。  

解决方案:

在后端response返回的header允许前端header的请求   以koa2为例: router.all('*', (ctx, next) => { // 允许来自所有域名请求 ctx.set('Access-Control-Allow-Origin', '*'); // 是否允许发送Cookie,ture为运行 ctx.set('Access-Control-Allow-Credentials', true); // 设置所允许的HTTP请求方法 ctx.set('Access-Control-Allow-Methods', 'OPTIONS, GET, PUT, POST, DELETE'); // 服务器支持的所有头信息字段,多个字段用逗号分隔 ctx.set('Access-Control-Allow-Headers', 'x-requested-with, x-ui-request, lang'); next(); });  
分享到:
评论
相关资源推荐
  • https://blog.csdn.net/freshlover/article/details/44223467 同源是指相同的协议、域名、端口,三者都相同才属于同域。不符合上述定义的请求,则称为跨域。 相信每个开发人员都曾遇到过跨域请求的情况,虽然情况不一样,但问题的本质都可以归为浏览器出于安全考虑下的同源策略的限制。 跨域的情形有很多,最常见的有Ajax跨域、Socket跨域和Canvas跨域。下面列举一些我们常见的跨域情形下,某些浏览器控制台给出的错误提示。 FireFox下的提示:已阻止交叉源请求:同源策略不允许读取***上的远程资源。可以将资源移动到相同的域名上或者启用 CORS 来解决这个问题。Canvas
  • 项目中的积累——HTTP跨域问题方案CORS 在项目的开发中经常遇到所谓的跨域问题。最近也是遇到了这个问题,并且花了很多时间来解决这个问题。前言首先,什么叫做跨域: MDN上的解释: 当一个资源请求一个其它域名的资源时会发起一个跨域HTTP请求(cross-origin HTTP request)。比如说,域名A(http://domaina.example)的某 Web 应用通过标签引入了域名B(http://domainb
  • 使用Vue配合Express框架构建SPA应用遇到的"Access-Control-Allow-Origin"问题 问题:Access-Control-Allow-Origin Access to XMLHttpRequest at 'http://127.0.0.1:3000/api/xxx?page=1' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origi...
  • https://blog.csdn.net/b376924098/article/details/79135555
  • OSS设置CORS规则以后还是报No 'Access-Control-Allow-Origin'解决方法 在OSS控制台设置了CORS规则以后,通过JS程序去调用的时候报No 'Access-Control-Allow-Origin' header is present on the requested resource,可以通过下面的思路来进行下排查: 1. 确认检查CORS规则是否设置好了,是否设置正确,正确的设置方法如下图:   2. CORS设置都正确的话,那
  • 跨域CORS图片上传问题 异常问题 项目中存在跨域图片上传请求,提示下列错误 Access to XMLHttpRequest at ‘http://localhost:8080/common/uploadPic’ from origin 'http://localhost:8000’has been blocked by CORS policy: Response to preflight request doesn’...
  • https://blog.csdn.net/FengGLA/article/details/79394633 概述 当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。 出于安全原因,浏览器限制从脚本内发起的跨源HTTP请求。 例如,XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源。如果要支持处于不同域名下的页面向服务器发起请求,就需要应用一些特殊的首部字...
  • Vue小模块之用户登录功能(六)使用axios解决‘Access-Control-Allow-Origin’跨域 Vue小模块之用户登录功能(六)使用axios解决‘Access-Control-Allow-Origin’跨域 技术栈 Vue全家桶: 前端框架 Vue.js 状态管理 Vuex 动态路由匹配 vue-router http服务 axios 模块打包 webpack UI框架 element 数据服务器 服务器端 node.js 基于node的web框架 express ...
  • https://blog.csdn.net/u010552788/article/details/51051146 Font from origin 'http://apps.bdimg.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'ht
  • 浅谈CORS(跨域资源分享),并给出Spring Security处理Preflight的方法 我之前就写过有关AngularJS+Spring Boot在有关跨域方面的博客,但那主要是针对解决问题,而没有去分析跨域。后来我在看了多篇博客之后,在这里整理总结下我对CORS的认识。 造成跨域的主要原因是由于请求方的1、域名 2、端口与被请求方不一致。而CORS可以提供跨域的资源分享(比如一个网站需要访问另一个网站的资源,这个资源可以是一张图片,或者是一个API接口),它需要前后端共同去实现。
  • 解决ajax跨域问题(2)cors   http://www.cnblogs.com/sloong/p/cors.html CORS 跨域 实现思路及相关解决方案 本篇包括以下内容: CORS 定义 CORS 对比 JSONP CORS,BROWSER支持情况 主要用途 Ajax请求跨域资源的异常 CORS 实现思路 安全说明 CORS 几种解决方案 自定义CORSFilter Nginx 配置支持Aja...
  • Cors跨域请求,配置Access-Control-Allow-Origin:"*",无效解决方案 由于应用需要跨域请求数据,博主在JDK8、Tomcat7.0的cors可以配置Access-Control-Allow-Origin:"*",但是我按照文档配置以后却没有生效,一度怀疑是tomcat或者jdk的问题,最后想起来web.xml是按照从前往后的顺序加载的。解决方案:是filter位置的问题,你把整个放到第一个filter的位置就可以了。给出web.xml: <web-app
  • https://blog.csdn.net/Fouse_/article/details/84634070 前端页面向后端发起请求时,出现跨域错误,mark一下,以防再次遇到这类问题 通过XMLHttpRequest发起Post请求: var data = { &quot;enterName&quot;:enterName, &quot;linkName&quot; :linkName, &quot;linkPhone&quot;:linkPhone }; var url = ip + '/addAdMessage'; co...
  • https://blog.csdn.net/wuyue_up/article/details/19554709 chrome调试网页出现以下错误:    XMLHttpRequest cannot load http://192.168.103.xx:8085/xxx/TestJsonInfo?value=1. Origin http://localhost:58888 is not allowed by Access-Control-Allow-Origin. 原因:    某些浏览器不
  • https://blog.csdn.net/m0_37836194/article/details/79173463 错误信息: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not
  • 【跨域问题】Access to XMLHttpRequest at'http://localhost:解决跨域问题,前后端连调,前端Vue后端SSM,解决Vue项目打包后打开页面图片不显示问题 问题: Failed to load resource: net::ERR_CONNECTION_REFUSED 这个问题我是因为后端服务没有启动,报错的; 跨域问题: Access to XMLHttpRequest at ‘http://localhost:9090/guidance/findGuidancePage’ from origin ‘http://localhost:8000’ h...
  • 关于跨域请求静态文件配置问题[Access-Control-Allow-Origin] 当请求不同域名下的一些文件的时候,例如:src='******.svg' 有时候会出现这样的提示 已阻止跨源请求:同源策略禁止读取位于*的远程资源。(原因:CORS 头缺少 'Access-Control-Allow-Origin')。 Font from origin '' has been blocked from loading by Cross-Origin Reso
  • https://blog.csdn.net/u014322206/article/details/84964444 最近学了一下vue,尝试做一个管理网站,使用axios请求后台接口数据时,又难免掉进了跨域坑中,报错如下403: 根据报错提示“XMLHttpRequest has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.”,可以得知...
  • https://blog.csdn.net/qq_36375770/article/details/80019651
  • https://blog.csdn.net/u012620506/article/details/52346264
Global site tag (gtag.js) - Google Analytics