No 'Access-Control-Allow-Origin' header is present on the requested resource'，跨域访问的解决方法

曾经终败给现在 2022-04-17 03:55 300阅读 0赞

**1. 当请求不在同一域名下的资源文件（ip地址+端口号）时，会报如下错误：**  
“No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.”，翻译下，因为被请求的资源没有设置 ‘Access-Control-Allow-Origin’，所以 从’http://localhost:8080’ 发起的请求不被允许。

**2. 原因：浏览器同源策略限制了此类请求。什么是同源策略？**  
同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。  
同源策略限制以下几种行为：  
1.) Cookie、LocalStorage 和 IndexDB 无法读取  
2.) DOM 和 Js对象无法获得  
3.) AJAX 请求不能发送  
常见跨域场景  
1.)同一域名下的不同文件或路径，允许访问。  
http://www.domain.com/a.js  
http://www.domain.com/b.js  
http://www.domain.com/lab/c.js  
2.)同一域名下的不同端口， 不允许访问。  
http://www.domain.com:8000/a.js  
http://www.domain.com/b.js  
3.)同一域名下的不同协议， 不允许访问。  
http://www.domain.com/a.js  
https://www.domain.com/b.js  
4.)同一ip地址下的不同域名之间，不允许访问。  
http://www.domain.com/a.js  
http://192.168.4.12/b.js  
5.) 不同域名之间不允许访问。  
http://www.domain1.com/a.js  
http://www.domain2.com/b.js

**3.解决办法。**  
1.)针对上面的错误提示，我们肯定可以通过在被请求的资源文件中添加 'Access-Control-Allow-Origin’来解决跨域问题。  
(1)如果被请求的是静态HTML文件，则需要只需要在被请求的HTML文件中加上一下标签。

(2)如果被请求的是java接口，则可以在响应头中加上：

response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com");

(3)如果被请求的是.net接口，则可以在响应头中加上：

Response.AddHeader("Access-Control-Allow-Origin", "*");

**2.)另外一种方法就是从前端解决。前端可以通过jsonp请求的方式或者设置代理的方式解决。**  
(1)通过jsonp的方式。  
跨域原理： 通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

原生实现：
     <script>
        var script = document.createElement('script');
        script.type = 'text/javascript';
    
        // 传参并指定回调执行函数为onBack
        script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
        document.head.appendChild(script);
    
        // 回调执行函数
        function onBack(res) {
            alert(JSON.stringify(res));
        }
     </script>

jquery实现：
    $.ajax({
        url: 'http://www.domain2.com:8080/login',
        type: 'get',
        dataType: 'jsonp',  // 请求方式为jsonp
         crossDomain: true,
    	 success: function(data) {},
        data: {}
    });

(2)通过请求代理的方式。  
跨域原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。  
以下提供java/.net跨域文件的源码，请自行发布使用。请求代理文件源码地址：https://github.com/muziye2013/CrossDomainAccessProxy

a. 如果是.NET开发环境，请将下载的“DotNet”源码发布为网站  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1amluZ2dlbg_size_16_color_FFFFFF_t_70]  
并将网站的物理路径，指向源码DotNet地址:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1amluZ2dlbg_size_16_color_FFFFFF_t_70 1]  
修改index.html页面中被请求的资源，在浏览器中访问index.html页面进行测试。

var testUrl="http://172.17.0.130/***/query";//修改测试服务地址

b.如果是Java开发环境，请将下载的“Java”源码放在tomcat网站下的webapps目录下，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1amluZ2dlbg_size_16_color_FFFFFF_t_70 2]  
修改index.html页面中被请求的资源，启动tomcat，在浏览器中访问index.html页面进行测试。

**以上，推荐使用第三种方式来进行配置，特别是对于前后端分离开发时，一劳永逸的解决跨域问题。**

文章参考：https://segmentfault.com/a/1190000011145364

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1amluZ2dlbg_size_16_color_FFFFFF_t_70]: /images/20220417/c20f7cbee5f344dabbcbb48779df343e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1amluZ2dlbg_size_16_color_FFFFFF_t_70 1]: /images/20220417/d1b72c126b0a4c71bf4e9063c5363792.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1amluZ2dlbg_size_16_color_FFFFFF_t_70 2]: /images/20220417/6fe157e6ece54a8c8b583228bed5f358.png

No 'Access-Control-Allow-Origin' header is present on the requested resource'，跨域访问的解决方法

发表评论取消回复

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

相关阅读

相关快速解决跨域问题：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource

相关 No 'Access-Control-Allow-Origin' header is present on the requested resource.'Ajax跨域访问解决方案

相关 Post request is No 'Access-Control-Allow-Origin' header is present on the requested resource跨域问题解决

相关完美解决Springboot跨域（No 'Access-Control-Allow-Origin' header is present on the requested resource）

相关 No 'Access-Control-Allow-Origin' header is present on the requested resource'，跨域访问的解决方法

相关跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resource

相关 No 'Access-Control-Allow-Origin' header is present on the requested resource.'Ajax跨域访问解决方案

相关 No 'Access-Control-Allow-Origin' header is present on the requested resource.'Ajax跨域访问解决方案

相关解决 js ajax跨域访问报“No 'Access-Control-Allow-Origin' header is present on the requested resource.”错误

相关 ajax 跨域访问 No ‘Access-Control-Allow-Origin‘ header is present on the requested resource