问题背景:
这似乎是一个普遍的问题,而且我已经犯了一个错误.
我有一个目前在Azure中托管的标准WebApi和一个调用AngularJS应用程序,该应用程序在所述WebApi上调用终点.
调用WebApi的AngularJS应用程序URL是:
- http://siteang.azurewebsites.net
WebApi地址是:
- https://site.azurewebsites.net
我想确保只有我在http://siteang.azurewebsites.net上的应用程序才能访问https://site.azurewebsites.net上的WebApi
问题:
我在AngularJS应用程序的提交表单上收到以下错误给WebApi服务.
- XMLHttpRequest cannot load https://site.azurewebsites.net/api/ShoppingComparison/GetC…itemIndex=Baby&itemtosearch=baby&lowToHigh=false&maxPrice=50000&minPrice=0.
- Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- Origin 'http://siteang.azurewebsites.net' is therefore not allowed access. The response had HTTP status code 500.
代码:
以下是对WebApi服务的$http请求.
请注意,调用的header属性已使用AngularJS站点的地址设置.
- loadSearchList: function (itemToSearch,itemIndex,countryCode) {
- self.itemToSearch = itemToSearch;
- self.itemCatagory = itemIndex;
- self.country = countryCode;
- self.searchList = [];
- $http({
- method: 'GET',url: 'https://site.azurewebsites.net/api/ShoppingComparison/GetComparisons',params: {
- itemtosearch: itemToSearch,itemIndex: itemIndex,countryCode: countryCode,maxPrice: '50000',minPrice: '0',highToLow: true,lowToHigh: false,amazonEbay: true,amazonOnly: false,ebayOnly: false
- },headers: {
- 'Content-Type': 'text/plain; charset=UTF-8','Access-Control-Allow-Origin': 'http://siteang.azurewebsites.net','Access-Control-Allow-Methods': 'POST,GET,OPTIONS,PUT,DELETE'
- }
- }).success(function (data) {
- //Success Handler.
- }).error(function (data) {
- //Error Handler.
- });
- }
以下是AngularJS应用程序正在调用的WebApi控制器.请注意,标头已设置为接受正在进行呼叫的http://siteang.azurewebsites.net网站:
- [System.Web.Http.HttpGet]
- [EnableCors(origins: "http://siteang.azurewebsites.net",headers: "*",methods: "*")]
- public ViewItemModel GetComparisons([FromUri] ComparisonRequestModel comparisonModel)
- {
- return _callAndSearchApis.SearchApis(comparisonModel);
- }
任何帮助确定WebApi控制器拒绝此请求的原因将非常感激.