CORS error on accessing route URL

Question

I am running my code using java and angularjs. The server is hosted in port http://localhost:8080 When I hit http://localhost:8080/data, I get below error

XMLHttpRequest cannot load http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

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

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

I am new to Angular. Can any one help what I am doing wrong in my code. I have searched in google and found some suggestions to enable headers at server side or at the browser end. I am looking if something I can do from my code itself. I know there are lot of similar question asked in this forum but not able to find the right solution. If anyone can help me by providing any link instead of giving me downvote

No changes you make in your own server-side code are going to make any difference. The problem is just that `http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=` doesn’t send the Access-Control-Allow-Origin response header. Nothing that you do will change that. So your only solutions are to switch to some client-side API that handles JSONP correctly (e.g., jQuery getJson https://api.jquery.com/jquery.getjson/) or do it yourself manually (using a script element instead of however you’re doing it now) or else to use a CORS proxy — sideshowbarker, Apr 27 '17 at 04:00
To use a CORS proxy, change `templateUrl: 'http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?'` to ` `templateUrl: 'https://cors-anywhere.herokuapp.com/http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?'` or set up your own proxy https://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource/42744707#42744707 — sideshowbarker, Apr 27 '17 at 04:03

score 1 · Answer 1 · edited Apr 29 '18 at 06:22

1

Put these in your headers :

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");`

edited Apr 29 '18 at 06:22

Pramesh Bajracharya

2,153
3
28
54

answered Apr 26 '17 at 12:13

Avihay m

551
1
5
22

score 0 · Answer 2 · answered Apr 26 '17 at 16:30

If you use spring at the server side, you can config your backend to allow origin access from foreign server (flickr in your case)

If you are JEE-Configuration, you should find another xml-config sample like below.

An Example can you find in spring guiedes under

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);
    }
}

In case of xml configuration:

<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>

Please read the guide for more information.

CORS error on accessing route URL

2 Answers2