如何解决请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted

技术标签:

【中文标题】如何解决请求的资源上不存在“Access-Control-Allow-Origin”标头【英文标题】:How to solve no 'Access-Control-Allow-Origin' header is present on the requested resource 【发布时间】:2018-09-27 18:08:57 【问题描述】:

CORS: 大多数开发人员在从另一个域访问休息服务时都会遇到一个非常常见的问题,我也是。

我得到这个错误:

请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许访问 Origin 'http://localhost:8080'。

下面是jsp sn-p。

<html>
<head>
<meta content="text/html; charset=utf-8">
<title>AJAX JSON SAMPLE</title>
<script type="application/javascript">	
function load() 
 
   var url = "https://samplewebapp1.herokuapp.com/rest/json/get";//use any url that have json data 
   var request; 
   if(window.XMLHttpRequest)   
    request=new XMLHttpRequest();//for Chrome, mozilla etc 
      
   else if(window.ActiveXObject)   
    request=new ActiveXObject("Microsoft.XMLHTTP");//for IE only 
      
   request.onreadystatechange  = function() 
      if (request.readyState == 4  ) 
       
        var jsonObj = JSON.parse(request.responseText);//JSON.parse() returns JSON object 
        document.getElementById("appName").innerHTML =  jsonObj.appName; 
        document.getElementById("language").innerHTML = jsonObj.language; 
       
    
   	request.open("GET", url, true); 
	request.send();  
 
</script>
</head>
<body>
	appName:
	<span id="appName"></span>
	<br /> language:
	<span id="language"></span>
	<br />
	<button type="button" onclick="load()">Load Information</button>

</body>

</html>

下面是该服务的其余服务实现。

`package com.heroku.rest;
 import java.util.Date;
 import javax.ws.rs.GET;
 import javax.ws.rs.Path;
 import javax.ws.rs.Produces;
 import javax.ws.rs.core.MediaType;

 import com.heroku.model.Heroku;

 @Path("/json")
 public class HerokuRestService 

 @GET
 @Path("/get")
 @Produces(MediaType.APPLICATION_JSON)
 public Heroku getTrackInJSON() 
         return new Heroku("My First Heroku", "Java", new Date().toString());
        `

我错过了什么?

【问题讨论】:

【参考方案1】:

您正在尝试对其他域执行 XmlHttpRequest。您可以简单地使用 CORS 告诉您的浏览器允许它。 (由于某些安全原因,它完全是特定于浏览器的)。

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US 使用此扩展名来允许访问没有“access-control-allow-origin”标头请求。

或者,您也可以手动配置 CORS。就像这里描述的https://www.html5rocks.com/en/tutorials/cors/

【讨论】:

这就是我不想用浏览器做任何事情的事情。其他最终用户将如何知道此类问题。无论如何,我会调查它的 html5rocks。但是,如果有任何替代方法可以在代码中而不是在浏览器中完成,请告诉我。 在这种情况下,您可以手动设置 CORS,但我还是建议让您的服务提供数据,而不管客户端是谁,可以是应用程序或浏览器,因此您可以返回带有标题的响应允许访问控制来源。像这样,Response.ok() .header("Access-Control-Allow-Origin", "*") .header("Access-Control-Allow-Methods", "POST, GET, PUT, UPDATE, OPTIONS" ) .header("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With").build();

以上是关于如何解决请求的资源上不存在“Access-Control-Allow-Origin”标头的主要内容,如果未能解决你的问题,请参考以下文章

Laravel 修复请求的资源上不存在“Access-Control-Allow-Origin”标头

如何调试请求的资源上不存在“Access-Control-Allow-Origin”标头

如何调试“请求的资源上不存在‘Access-Control-Allow-Origin’标头”

如何修复“请求的资源上不存在‘Access-Control-Allow-Origin’标头。”

请求的资源发布请求上不存在“Access-Control-Allow-Origin”标头

带有 Spring Boot 和 Spring Security 的 Angular2