2015-10-06 72 views
0

我正在使用Angular JS构建SPA应用程序,而后端是使用承载令牌的asp.net WebAPI。我有一个有趣的问题,那就是应用程序在我的本地机器上工作正常,但是当我将它上传到天蓝色的网站时,我突然发现CORS错误,并且我不确定根本原因。有趣的是,我可以很好地登录到应用程序,获取不记名令牌,但我无法访问任何控制器方法。下面的代码显示了localhost,但显然当我上传到Azure网站时,服务名称将被替换。CORS在本地正常工作,但在使用Azure网站时会中断

我得到的错误是

"XMLHttpRequest cannot load https://tradesservice.azurewebsites.net/api/OpenPnL. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://perseus1.azurewebsites.net' is therefore not allowed access. The response had HTTP status code 500." 

Perseus1当然是我的角度应用程序,tradesservice是我的后端API。

发出请求的代码如下:

perseusApp.factory('openpnlData', function ($resource,currentUser) { 
return $resource('http://localhost:36080/api/OpenPnL/:id', null, 
    { 
      'get': { 
       headers: { 'Authorization': 'Bearer ' + currentUser.getProfile().token }, 
       isArray: true 
      }, 

      'save': { 
       headers: { 'Authorization': 'Bearer ' + currentUser.getProfile().token } 
      }, 

      'update': { 
       method: 'PUT', 
       headers: { 'Authorization': 'Bearer ' + currentUser.getProfile().token } 
      } 
     }); 

});

基本上我的控制器在用户认证后调用数据角度服务。

控制器代码当前配置为允许来自任何地方的请求。

namespace TradesService.Controllers 
{ 
[Authorize] 
[EnableCors(origins: "*", headers: "*", methods: "*")] 
public class OpenPnLController : ApiController 
{ 
    private benderEntities db = new benderEntities(); 

    // GET: api/OpenPnL 
    public IQueryable<OpenPnL> GetOpenPnL() 
    { 
     return db.OpenPnL; 
    } 

    // GET: api/OpenPnL/5 
    [ResponseType(typeof(OpenPnL))] 
    public IHttpActionResult GetOpenPnL(int id) 
    { 
     OpenPnL openPnL = db.OpenPnL.Find(id); 
     if (openPnL == null) 
     { 
      return NotFound(); 
     } 

     return Ok(openPnL); 
    } 

和我WebAPIConfig确实使CORS

public static void Register(HttpConfiguration config) 
    { 
     // Web API configuration and services 
     // Configure Web API to use only bearer token authentication. 
     config.EnableCors(); 
     config.SuppressDefaultHostAuthentication(); 
     config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType)); 

     // Web API routes 
     config.MapHttpAttributeRoutes(); 

     config.Routes.MapHttpRoute(
      name: "DefaultApi", 
      routeTemplate: "api/{controller}/{id}", 
      defaults: new { id = RouteParameter.Optional } 
     ); 
    } 
} 

以及我启用它的令牌服务以及

public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context) 
    { 
     context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" }); 
     var userManager = context.OwinContext.GetUserManager<ApplicationUserManager>(); 

     ApplicationUser user = await userManager.FindAsync(context.UserName, context.Password); 

     if (user == null) 
     { 
      context.SetError("invalid_grant", "The user name or password is incorrect."); 
      return; 
     } 

请求看起来像这样

Accept:application/json, text/plain, */* 
Accept-Encoding:gzip, deflate, sdch 
Accept-Language:en-US,en;q=0.8 
Authorization:Bearer Rlau_KVh9WUjrVw1smLaJjkR3G_nT1mUlliGVFW8YwoGQjL4RUyozVug7bXiFrdQQAKWowDlx2OpTbUYbL3XS_pouVQMT6YYzNDxb67byWg1szpuDTt-f3XAakKf0ilLN-0T1CI8dDO5PWewBzA7B3mbI0XNGvfZpPpZc_f5orVW4RC58OqTm35Brh73_lOPtlLrdG3rQwqUIHTI6Tqi69TXdl8D8I7KjTo5ruboIpGJHvqQOF38Flqvskdh4M6ottajp3znE4SToil78yOrZ9oPmeFemdpVde9UpTJRcDqF2tVf-9eALorym6cYYWBoji11chr594lsTp0IW30_Xa9uyxwDIOSgEGGxWzbFBuE6fKzpTy49dSW-kxD6mii-M7eW1D_aFdXVEp8IsTbLL6Pa5o_i3izsFR2MajfWFu-KwzOcWJ0SL38XAIz12ouq6ifnRZQe4ezOZkc5ckgy1T86xVVa0z4q0_2jsx-TCYw 
Cache-Control:no-cache 
Connection:keep-alive 
Host:tradesservice.azurewebsites.net 
Origin:https://perseus1.azurewebsites.net 
Pragma:no-cache 
Referer:https://perseus1.azurewebsites.net/openpnl 
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36 

我得到的回应是

HTTP/1.1 500 Internal Server Error 
Cache-Control: private 
Content-Length: 36 
Content-Type: application/json; charset=utf-8 
Server: Microsoft-IIS/8.0 
X-AspNet-Version: 4.0.30319 
X-Powered-By: ASP.NET 
Set- Cookie:ARRAffinity=b0cea33dbc4e2efdaae3fe9feccd731de0b41e0e9fe1259e0169810645b448f9;Path=/;Domain=tradesservice.azurewebsites.net 
Date: Tue, 06 Oct 2015 23:15:21 GMT 

Chrome中的javascript控制台显示以下内容。

XMLHttpRequest cannot load https://tradesservice.azurewebsites.net/api/OpenPnL. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://perseus1.azurewebsites.net' is therefore not allowed access. The response had HTTP status code 500. 

有什么想法,我在做什么错在这里?

更新

有人提到服务器配置可能是一个问题。下面是在web.config中为Web API

<system.web> 
    <authentication mode="None" /> 
    <compilation debug="true" targetFramework="4.5.2" /> 
    <httpRuntime targetFramework="4.5.2" /> 

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

和网站的相关章节托管角码

<configuration> 

    <system.web> 
     <compilation debug="true" targetFramework="4.5.2" /> 
     <httpRuntime targetFramework="4.5.2" /> 
    </system.web> 
    <system.webServer> 
    <httpProtocol> 
     <customHeaders> 
     <add name="Access-Control-Allow-Origin" value="*" /> 
     <add name="Access-Control-Allow-Methods" value="GET,POST,DELETE,HEAD,PUT,OPTIONS" /> 
     <add name="Access-Control-Allow-Headers" value="Origin, X-Olaround-Debug-Mode, Authorization, Accept" /> 
     <add name="Access-Control-Expose-Headers" value="X-Olaround-Debug-Mode, X-Olaround-Request-Start-Timestamp, X-Olaround-Request-End-Timestamp, X-Olaround-Request-Time, X-Olaround-Request-Method, X-Olaround-Request-Result, X-Olaround-Request-Endpoint" /> 
     </customHeaders> 
    </httpProtocol> 
    </system.webServer> 
</configuration> 

我修改web.config中包括身体上面列出现在请求看起来像这样

将代码添加到我的web.config网站中,现在请求看起来像这样..

OPTIONS /api/OpenPnL HTTP/1.1 
Host: tradesservice.azurewebsites.net 
Connection: keep-alive 
Pragma: no-cache 
Cache-Control: no-cache 
Access-Control-Request-Method: GET 
Origin: https://perseus1.azurewebsites.net 
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36 
Access-Control-Request-Headers: accept, authorization 
Accept: */* 

Referer: https://perseus1.azurewebsites.net/openpnl 
Accept-Encoding: gzip, deflate, sdch 
Accept-Language: en-US,en;q=0.8 

和响应

HTTP/1.1 200 OK 
Allow: OPTIONS, TRACE, GET, HEAD, POST 
Content-Length: 0 
Server: Microsoft-IIS/8.0 
Public: OPTIONS, TRACE, GET, HEAD, POST 
X-Powered-By: ASP.NET 
Set-Cookie: ARRAffinity=b0cea33dbc4e2efdaae3fe9feccd731de0b41e0e9fe1259e0169810645b448f9;Path=/;Domain=tradesservice.azurewebsites.net 
Date: Tue, 06 Oct 2015 23:59:16 GMT 

没有更多的500错误。

+0

响应中没有CORS头,但它不是(必然)是CORS错误,有一些_Internal Server Error_如500响应中所示 –

+2

确保它接受OPTIONS请求 – charlietfl

+0

如上所述,看看网络选项卡并检查OPTIONS标头 – fubbe

回答

0

我最近有类似的问题,也有一个站点托管在Azure上,虽然我不认为这是原因。发现CORS错误在某种程度上是由SQL超时异常触发的,因为我们的存储过程正在处理大量数据,并且耗时过长。加速了一些过程,大部分CORS错误都停止了,其他过程也需要做相同的处理,然后再重新工作。

看起来你有不同的问题,但如果任何人有CORS错误,在请求发出几分钟后就会显示出来,这是值得研究的。

相关问题