locked
how can I enable the CORS on my app hosted on azure portal RRS feed

  • Question

  •  hi there

    I need to add this https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJnRIwTOim2EcRMxFUkHR9wzQ&key=AIzaSyAK0imHJAd-XjoZAndkMYU9pXkugnvnWFoto my app hosted in the Azure portal as cors in order to my info displayed into my app

    I have been written a  js script to display the info I need from the above API in my asp .net app

    Now it is working only if I have a CORS EXTENSION ENABLED IN MY BROWSER

    Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://  maps.googleapis.com/maps/api/place/details/json?placeid=ChIJnRIwTOim2EcRMxFUkHR9wzQ&key=AIzaSyAK0imHJAd-XjoZAndkMYU9pXkugnvnWFo . (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).




    • Edited by e_d_ Friday, June 29, 2018 10:34 AM
    Friday, June 29, 2018 10:30 AM

All replies

  • Cross-Origin Resource Sharing (CORS) allows JavaScript code running in a browser on an external host to interact with your backend. Specify the origins that should be allowed to make cross-origin calls (for example: http://example.com:12345). To allow all, use "*" and remove all other origins from the list. Slashes are not allowed as part of domain or after TLD.

    Refer the below screenshot for more details.

     

    You can also add the below configuration in your web.config file.

    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Access-Control-Allow-Origin" value="*" />
          <add name="Access-Control-Allow-Headers" value="Content-Type" />
          <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>

    Reference: https://stackoverflow.com/questions/31268146/enabling-cors-for-web-api-in-azure-web-apps?noredirect=1#comment50545153_31268146

    If you are looking for CORS request without origin header, refer to this feedback.

    ------------------------------------------------------------------------------------------
    If this answer was helpful, click “Mark as Answer” or “Up-Vote”. To provide additional feedback on your forum experience, click here.

    Friday, June 29, 2018 2:33 PM
  •  That's not working in my care and i am wondering why . I tried sevaral solutions before asking and none of them worked

    • Edited by e_d_ Monday, July 2, 2018 12:12 PM
    Monday, July 2, 2018 12:10 PM

  • I think that I said that I am using js to get the data from the API, not c# to get data from the API, in the browser is working when I have Cors ENABLED 
    Monday, July 2, 2018 12:15 PM
  • now I have this Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://code.jquery.com/jquery-3.3.1.slim.min.js. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://localhost:59120’) too ..well it smth wrong with Azure?

    Monday, July 2, 2018 1:50 PM
  • Suggesting you check your Web.Config and jQuery Script and make necessary changes, and see if this works for you.

    Web.config,

    <httpProtocol>
          <customHeaders>
            <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE"/>
            <add name="Access-Control-Max-Age" value="3628800"/>
          </customHeaders>
    </httpProtocol>

    jQuery Script,

    <script type="text/javascript">     
            $(document).ready(function () {            
                $("#b1").click(function () {               
                    var jsondata = $('#s1').text();
                    $.ajax({
                        url: "http://api-xxx.azurewebsites.net/api/demo/1234567",
                        type: "POST",
                        data: JSON.stringify(jsondata),
                        contentType: 'application/json', //<--- This Line make everthing perfect
                        dataType: 'json',
                        async: false,
                        complete: function (response) {
                            console.log(response);
                         },
                         statusCode: {
                            200: function () {
                                console.log("Success...");
                            },
                            400: function () {
                                console.log("Bad Request...");
                            }
                        },              
                    });
    
                    console.log(JSON.stringify(jsondata));
                });
            });


    Wednesday, July 4, 2018 4:56 PM
  • Just checking in if you have had a chance to see our previous response. If this answers your query, do click “Mark as Answer” and Up-Vote for the same. And, if you have any further query do let us know.
    Friday, July 6, 2018 7:36 PM