访问路由 URL 时出现 CORS 错误答案

【问题标题】：CORS error on accessing route URL访问路由 URL 时出现 CORS 错误
【发布时间】：2017-09-23 20:00:24
【问题描述】：

我正在使用 java 和 angularjs 运行我的代码。服务器托管在端口 http://localhost:8080 当我点击 http://localhost:8080/data 时，我得到以下错误

XMLHttpRequest 无法加载 http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?。请求中不存在“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“http://localhost:8080” 访问。

$routeProvider
        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'MainCtrl'
        })

         .when('/data', {
             templateUrl: 'http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?'
        })

我是 Angular 的新手。任何人都可以帮助我在我的代码中做错了什么。我在 google 中搜索并找到了一些在服务器端或浏览器端启用标头的建议。我正在寻找是否可以从我的代码本身做些什么。我知道这个论坛有很多类似的问题，但无法找到正确的解决方案。如果有人可以通过提供任何链接而不是给我downvote来帮助我

【问题讨论】：

你必须处理 cors 标头服务器端
@Karim 你的意思是java服务器代码？
在java代码中是的
您对自己的服务器端代码所做的任何更改都不会产生任何影响。问题只是 http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback= 没有发送 Access-Control-Allow-Origin 响应头。你所做的任何事情都不会改变这一点。因此，您唯一的解决方案是切换到正确处理 JSONP 的某些客户端 API（例如，jQuery getJson api.jquery.com/jquery.getjson）或自己手动执行（使用脚本元素而不是您现在正在执行的操作）或使用CORS 代理
要使用 CORS 代理，请将 templateUrl: 'http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?' 更改为 `templateUrl: 'https://cors-anywhere.herokuapp.com/http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?' 或设置您自己的代理 stackoverflow.com/questions/20035101/…

标签： angularjs cors

【解决方案1】：

把这些放在你的标题中：

HttpServletResponse resp = (HttpServletResponse) servletResponse;
    resp.addHeader("Access-Control-Allow-Origin","*");
    resp.addHeader("Access-Control-Allow-Methods","GET,POST");
    resp.addHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");`

【讨论】：

【解决方案2】：

如果您在服务器端使用 spring，您可以配置后端以允许来自外部服务器的源访问（在您的情况下为 flickr）

如果您是 JEE-Configuration，您应该找到另一个 xml-config 示例，如下所示。

您可以在

下的 spring 指南中找到一个示例

https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedOrigins("http://domain2.com")
            .allowedMethods("PUT", "DELETE")
            .allowedHeaders("header1", "header2", "header3")
            .exposedHeaders("header1", "header2")
            .allowCredentials(false).maxAge(3600);
    }
}

如果是xml配置：

<mvc:cors>
    <mvc:mapping path="/**" />
</mvc:cors>

<mvc:cors>

    <mvc:mapping path="/api/**"
        allowed-origins="http://domain1.com, http://domain2.com"
        allowed-methods="GET, PUT"
        allowed-headers="header1, header2, header3"
        exposed-headers="header1, header2" allow-credentials="false"
        max-age="123" />

    <mvc:mapping path="/resources/**"
        allowed-origins="http://domain1.com" />

</mvc:cors>

请阅读指南以获取更多信息。

【讨论】：