Ajax - 对 web api 的令牌请求答案

【问题标题】：Ajax - Token Request to web apiAjax - 对 web api 的令牌请求
【发布时间】：2018-03-02 09:40:04
【问题描述】：

我在这里做一些代码我需要从 javascript 客户端发送一个带有用户名和密码的请求到 web api。在这个请求中，我需要接收一个令牌。

这就是我现在拥有的：

  var loginData = {
     grant_type: 'password',
      //Username and password are fill by the user in the text fields
     username: username, 
     password: password
 };

  $.ajax({
    type: 'POST',
    crossDomain: true,   //I'm having some problems with: Access-Control-Allow-Origin
    crossOrigin:true,
    contentType: "application/json",
    url: 'https://localhost:44380/Token',
    data: loginData
}).done(function (data) {
    self.user(data.userName);
    sessionStorage.setItem("Token", data.access_token);
}).fail("Error");

当我执行客户端时，我收到与 Access-Control-Allow-Origin 相关的错误

请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'null' 不允许访问。响应的 HTTP 状态代码为 400。

并且跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。

有什么想法吗？我是网络新手...

我不确定我是否正确地执行 ajax 请求...

【问题讨论】：

标签： ajax token

【解决方案1】：

添加 web.config

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="http://[your service domain]" />
        <add name="Access-Control-Allow-Methods" value="*" />
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Authorization"/>
        <add name="Access-Control-Allow-Credentials" value="true"/>
      </customHeaders>
    </httpProtocol>
  </system.webServer>

【讨论】：

【解决方案2】：

您需要在项目中启用 cors 这里有一个链接可以帮助你

https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

【讨论】：