跨域详解 been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the requeste

雨点打透心脏的1/2处 2022-11-03 04:22 156阅读 0赞

20210226174049707.png

上面的意思就是 你访问一个什么地址被CORS 协议阻止, 没有 在Hearder 里面发现 Access-Control-Allow-Origin 的参数的 资源

跨域问题的原因:浏览器出于安全考虑,限制访问本站点以为的资源。

比如你有一个 网站 127.0.0.1:8080/ , 并且上面挂了一个页面 ,那么在这个页面中 ,你只访问 本站点的 资源不会受到限制,但是你如果访问其他站点,比如 127.0.0.1:8081 的资源就会受到限制。

备注:暂且把 协议,域名,端口都一样的叫做同一个站点。

但是 带有 src 属性的标签可以没有这个 限制,比如 img ,script 等等。

在说说历史,以前的程序前后端不分离, 页面 和 请求接口,在同一个 域名同一个端口下面。 所有 浏览器认为来源这个 站点的页面 ,请求的是同一个站点的 接口,那么久会允许。

比如 127.0.0.1:8080/index.html ,请求 127.0.0.1:8080/a/b/c/userLit 接口,这样是可以的

在说说现在,前后点分离,页面 和接口一般不是一个程序,这样就不允许,就会抛出这个异常。

比如前端页面放在 127.0.0.1:8081/index.html ,后端接口 127.0.0.1:8080/a/b/c/userLit ,这时候端口变了( 前面说了 ,协议,域名作者Ip ,端口 要一样才算一个站点 ),

证明:

  1 条件 我启动了一个Java 程序 在这地有一个资源test.html 对应地址:http://localhost:8080/WebTest/test2.html

  2 我启动了一个 nginx 端口 80 ,并且在 html 文件夹下面有 test.html 对应地址:http://localhost:80/WebTest/test.html

nginx 配置 :

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTU5NDEy_size_16_color_FFFFFF_t_70

test.html : 如果这么写 ,没用 nginx 的 代理 直接访问 ,会出 跨域问题。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTU5NDEy_size_16_color_FFFFFF_t_70 1

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTU5NDEy_size_16_color_FFFFFF_t_70 2

但是 如果 :动态接口 走nginx 代理就不会出问题。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTU5NDEy_size_16_color_FFFFFF_t_70 3

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdTU5NDEy_size_16_color_FFFFFF_t_70 4

解决办法:

1.比较老的,比较通用,也比较麻烦的 jsonp

原理 利用

这样 只要定义一个回调方法f( data ){ 处理数据 },然后 src 对应的接口需要 返回 f( data ); 这样的 格式,这样 在 这个数据返回以后就执行了 f方法,并且带过来数据。

jquery 之类的 框架 有多这个 封装,随时随地动态的生产

发表评论

表情:
评论列表 (有 0 条评论,156人围观)

还没有评论,来说两句吧...

相关阅读