`

No 'Access-Control-Allow-Origin' header is present on the requested resource.

 
阅读更多

原创转载请注明出处:http://agilestyle.iteye.com/blog/2353274

 

通常项目开发中我们通常会遇到跨域调用,然后当请求调用的时候会遇到这个错

No 'Access-Control-Allow-Origin' header is present on the requested resource.


 

通常解决这个错误有两种解决方法

1. JSONP

2. CORS

Note: 

CORS与JSONP相比,更为先进、方便和可靠。

  • JSONP只能实现GET请求,而CORS支持所有类型的HTTP请求。
  • 使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。
  • JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS。

但是呢,现在你的项目还是在开发阶段,比如技术选型POC阶段,用不着搞得这么复杂,所以最简单的方法就是在Chrome中安装一个插件Allow-Control-Allow-Origin,可以快而有效的解决这类问题。


 

安装后


开启CORS,再次调试跨域调用,错误就没有了


 

 

  • 大小: 51.1 KB
  • 大小: 29.9 KB
  • 大小: 28.4 KB
  • 大小: 64.3 KB
分享到:
评论

相关推荐

    静态文件访问不到报No Access-Control-Allow-Origin处理办法

    当一个网页尝试从不同的源(协议、域名或端口)请求资源时,如果目标服务器没有允许这个源的权限,浏览器会阻止该请求,从而出现"No 'Access-Control-Allow-Origin' header is present on the requested resource"的...

    Nginx解决转发地址时跨域的问题

    No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 这就是跨域问题。解决方案有不少,比较好的是服务器端配置CORS,但要求服务器端...

    Nginx跨域设置Access-Control-Allow-Origin无效的解决办法

    add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET,POST'; 使用以下配置,生效。 if ($request_method = '...

    Allow-Control-Allow-Origin

    解决浏览器跨域请求出现No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.问题

    解决方案 ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’

    标题 "解决方案 ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’" 提到的是一个在Web开发中常见的跨域问题。`Access-Control-Allow-Origin` 是一个用于控制资源跨域访问的...

    已解决:No 'Access-Control-Allow-Origin'跨域问题

    <param-value>Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value> </init-param> <async-supported>true...

    跨域Access-Control-Allow-Origin解决方案.docx

    - 浏览器控制台通常会显示类似的错误消息:“XMLHttpRequest cannot load [URL] No 'Access-Control-Allow-Origin' header is present on the requested resource”。 #### 三、解决跨域问题的方法 **1. 修改后端...

    corsyusha:简单快速的代理,可在针对现有API进行原型设计时绕过CORS问题,而不必担心CORS

    has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch ...

    230207-031shopDemo(抽离跨域异常处理管道中间件之CorsExceptionHandlerMiddleware)

     /// 2、“has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.”。  /// 3、“has been blocked by CORS policy: Response to preflight request...

    google cast demo

    依赖于CCL,...报XMLHttpRequest cannot load 和No 'Access-Control-Allow-Origin' header is present on the requested resource.的错误 暂时无解,我在服务器上已经enable了CORS

    VUE axios发送跨域请求需要注意的问题

    $response->header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, Token'); $response->header('Access-Control-Allow-Origin', '*'); $response->...

    vue跨域解决方法

    跨域错误通常表现为"No ‘Access-Control-Allow-Origin’ header is present on the requested resource.",这意味着服务器没有正确配置允许跨域访问。以下是三种常见的Vue跨域解决方案: 1. **后台设置CORS**: ...

    Vue前后端不同端口的实现方法

    res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Origin, Accept, X-Requested-With'); res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH...

    快速解决Canvas.toDataURL 图片跨域的问题

    【Redirect at origin ‘http://sub1.xx.com’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource....

    local-cors-proxy:简单的代理绕过CORS问题

    构建该模块是为了解决出现此错误的问题: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque ...

    有关Ajax跨域问题的两种解决方法

    概述 Ajax跨域是前端开发中常见的问题,本文描述了以Google浏览器Chrome作为... No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8000’ is therefor

    关于python的bottle框架跨域请求报错问题的处理方法

    在用python的bottle框架开发时,前端使用ajax跨域访问时,js代码老是进入不了success,而是... No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not

    PHP如何实现跨域

    No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access. 这是因为浏览器跨域策略起作用,阻止了跨域的请求。看看HTTP请求过程就知道...

    Django使用中间件解决前后端同源策略问题

    问题描述 前端时间在公司的时候,要使用angular开发一个网站,因为angular很适合前后端分离,...No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is

    详解Django解决ajax跨域访问问题

    这篇文章主要给大家介绍了关于Django跨域请求问题解决的相关资料,文中介绍的实现...No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 这是由于CORS导致的。 什么是CORS? CORS

Global site tag (gtag.js) - Google Analytics