Base solution for your next web application
Open Closed

CORS issue 'Access-Control-Allow-Headers' #6775


User avatar
0
BobIngham created

angular, dotnetcore, 6.8.0 .net framework 4.6.1 I have a request from a tenant to lockdown the tenant login to an ip address or range of ip paddresses. When building a list of whitelisted IP's I would like the user to be able to get their local public IP (they have a fixed IP). The problem I have is with CORS and I am useless with CORS. The simplest call I have found is to create and inject a service in my angular component with this method:

getIpAddress() {
    return this.http.get<{ ip: string }>('https://jsonip.com/');
}

That gives me this error:

Access to XMLHttpRequest at 'https://jsonip.com/' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field pragma is not allowed by Access-Control-Allow-Headers in preflight response.

I have added CORS origins to my appsettings.json in the dotnetcore solution as follows:

"CorsOrigins": "http://*.nuagecare.net,http://localhost:4200,http://localhost:49152,https://jsonip.com/",

I have googled as much as I can but reading about CORS for me is like trying to decipher the Rosetta Stone. Can anyone give me a hand? Note - eventually I will use ipstack.com so I can also get the lat/long to lockdown device usage but the above code gives the general idea.


13 Answer(s)
  • User Avatar
    0
    aaron created
    Support Team

    It's a header problem, not an origin problem.

  • User Avatar
    0
    BobIngham created

    Aaron, thanks very much for pointing out that I have a problem which is different to the one I thought I might have. I am now happy we have established the problem. Thanks. Should I raise a different post for the header problem or would you like to suggest a way I can fix the problem? How do I change the header from within the code? As I said, I am no CORS genius, in fact I am no genius at all and bow to your superiority in this field. Any help and suggestions you can give are gratefully recieved.

  • User Avatar
    0
    aaron created
    Support Team

    This post is fine.

    ASP<span></span>.NET Zero already specifies .AllowAnyHeader(). How to reproduce this?

  • User Avatar
    0
    BobIngham created

    Inject httpClient into any component in Angular Zero:

    import { HttpClient } from '@angular/common/http';
    

    Add a new method:

        getClientIP(): void {
            this.http.get<{ ip: string }>('https://jsonip.com/')
                .subscribe(data => {
                console.log(data);
            });
        }
    

    Call the method from the ngOnInit() event:

    this.getClientIP();
    

    And you will get the same error. Tell me Aaron, just as an aside, do you get more pleasure from:

    1. proving you are a better coder than others,
    2. helping people out when they have a problem, or
    3. just pissing people off?

    It's something I have often wondered when I have defended your comments on here and in the github pages....

  • User Avatar
    0
    aaron created
    Support Team

    I apologise if I pissed you off.

    I provide concise answers, or ask short and direct questions when there is insufficient information.

    Do you prefer that I stop answering your questions?

  • User Avatar
    0
    aaron created
    Support Team

    https://jsonip.com does not allow any headers. This is unrelated to the CORS configuration in ASP<span></span>.NET Zero and your app.

    Skip normalizeRequestHeaders by making these changes in service-proxy.module.ts:

    + import { HttpRequest } from '@angular/common/http';
    +
    + class MyHttpInterceptor extends AbpHttpInterceptor {
    +     protected normalizeRequestHeaders(request: HttpRequest<any>): HttpRequest<any> {
    +         return request.url === 'https://jsonip.com/' ? request : super.normalizeRequestHeaders(request);
    +     };
    + };
    
    ...
    
    -         { provide: HTTP_INTERCEPTORS, useClass: AbpHttpInterceptor, multi: true }
    +         { provide: HTTP_INTERCEPTORS, useClass: MyHttpInterceptor, multi: true }
    
  • User Avatar
    0
    BobIngham created

    Thanks Aaron, I don't want to change service-proxy.module.ts. As I said, I have no idea how a lot of this stuff works which is why I'm grateful for you guys for giving me a framework I can copy from. Your post led me to google some more based on the fact that I needed to remove headers from the request without changing the underlying framework. The answer is to pass a null value for the headers parameter in the get request.

    return this.http.get<{ ip: string }>('https://jsonip.com/', null);
    

    This may seem obvious to you, but if it is then maybe you should have suggested it in the first place rather than sending me round the houses by pointing out that I didn't even know what the nature of the problem was, then telling me that Zero has .AllowAnyHeader() set and then asking me how to reproduce the problem. If it wasn't obvious to you then I apologise for calling you out.

  • User Avatar
    0
    aaron created
    Support Team

    I don't have any formal experience in Angular. I'm not sure if you know, but my day job is not with Volosoft. I just do my best to help people and sometimes it means having to ask when there is insufficient information.

    The solution that you have found is as new to me as it is to you. I only knew AbpHttpInterceptor existed and spent around 2 hours finding, testing and then sharing the answer. It is now 1:37 AM where I am.

    Thank you for sharing. I learned something and hopefully can help others with the same question faster in future.

  • User Avatar
    0
    BobIngham created

    Jeepers, creepers, Aaron, the amount of time you spend on here helping people out I thought you were full time with Volosoft. I sincerely apologise for anything I may have said in haste and thank you very much for all the help you have given me in the past. I commend you on your attention to detail. From now on I will defend you to the hilt and sorry for any offence I may have caused. And any time you're looking for a job just drop me a line!

  • User Avatar
    0
    aaron created
    Support Team

    Thank you, but you don't have to.

    The people at Volosoft are good people. They are doing really great work with ABP. I have learned a lot from the framework as a user and even now as a contributor.

    Even though ASP<span></span>.NET Zero is not open source (they need to make money too!), it is run with a high level of visibility on GitHub with respect to what is being worked on as well as the rationale for many decisions.

    There are companies that just provide customers with a download link and claim to provide support via email or take suggestions via user voice. The people at Volosoft make an effort to reply almost every day!

    You don't have to defend me or anyone -- that will just put you in conflict with others. I just wish people don't encourage nasty comments when things don't go their way. It really is counter-productive.

    Good day/night.

  • User Avatar
    0
    commondesk created

    But the difference is, most companys that charge $2500 for a product specifically designed for developers, provide a better way to get concise explanations and have extensive documenation on the product. Because the documentation for the product is, cough.. cough.. "evolving", the people at Volosoft must/should respond every day to every questions.

    Note, I also use ServiceStack.com, and just a single person, the actual developer of the product, provides extreemly detailed responses, and we have interactions that often go on for days. ServiceStack yearly cost is $150??

    IMHO, Unfortunaly someone like aaron, respons before Volosoft, and because of that we ASSUMED that you were a staff member of theirs. Point being there SHOULD be more people like aaron answering questions.

  • User Avatar
    0
    aaron created
    Support Team

    The majority of the questions here are not even specific to ASP<span></span>.NET Zero.

    I do have an arrangement with Volosoft, in which I assist with these support channels. This allows the full-time staff to spend more time on development and documentation.

  • User Avatar
    0
    commondesk created

    Oho. I see.

    I'm glad to know that your the guy that will answer our questions..