CODEWITHSUNDEEP
javascriptjqueryangularjsajaxasp.net-web-api
Swapna
Swapna

Reputation: 403

CORS header ‘Access-Control-Allow-Origin’ missing' . where i need to write code in webapi (service) or in client side

i have one web api , which has basic authentication. that api code i cant change .can we add cors concept to retrieve data in client side applciation either in web.config or enabling CORS in client side application to resolve the issue of Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://example.com/abc. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

code

<body>
    <div ng-app="myApp" ng-controller="customersCtrl">
        <table>
            <tr ng-repeat="x in names">
                <td>{{ x.name }}</td>
                <td>{{ x.city }}</td>
                               </tr>
        </table>
    </div>
    <script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get('https://example.com/abc', {
        headers: { 'Authorization': 'abc:abc', 'Access-Control-Allow-Origin': '*' }
    }).then(function (response) {$scope.names = response.data.records;});
});
    </script>
</body>

Upvotes: 0

Views: 1487

Answers (3)

federico scamuzzi
federico scamuzzi

Reputation: 3778

If you're using the Asp.NET WEBAPI you can resolve the issue ..without set it in client ..but directly in the server...try to put in your StartUp.cs

using Microsoft.Owin;
using Owin;

  public void Configuration(IAppBuilder app)
        {
            app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
            ConfigureAuth(app);

        }

And in your WebConfig in the section somthing like:

<handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0"/>
      <remove name="OPTIONSVerbHandler"/>
      <remove name="TRACEVerbHandler"/>
      <remove name="WebDAV"/>
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0"/>
    </handlers>

Hope it helps you

Upvotes: 0

Lon Yang
Lon Yang

Reputation: 696

If the web server is IIS. You can edit the web.confg.

<system.webServer>
 <httpProtocol>
  <customHeaders>
   <add name="Access-Control-Allow-Origin" value="*" />
  </customHeaders>
 </httpProtocol>
</system.webServer>

Upvotes: 0

Christos
Christos

Reputation: 53958

You need to add the following two lines in your WebApiConfig

var cors = new EnableCorsAttribute("....", "*", "*");
config.EnableCors(cors);

The "..." should contain the url of your web app.

For more info and alternatives, please have a look here.

Furthermore, there isn't any need for the client to set the following:

'Access-Control-Allow-Origin': '*'

Upvotes: 1

Related Questions