MVC Azure + AjaxCall + microsofttranslator +对预检请求的响应未通过访问控制检查：它没有HTTP正常状态

Question

    public async Task<string> accountLockUnlock(string wordtobeConverted)
    {
        try
        {
            var translatedText = "";
            while (true)
            {
                translatedText = await Translate(wordtobeConverted, "en");
                return translatedText;
            }
        }
        catch (Exception ex)
        {
            //CreateConsentsResponse consents = new CreateConsentsResponse();
            //consents.id = ex.Message.ToString();
            //return consents;
            throw new Exception(ex.Message.ToString());
        }
    }

    public static async Task<string> Translate(string text, string language)
    {
        var encodedText = WebUtility.UrlEncode(text);
        var uri = "https://api.microsofttranslator.com/V2/Http.svc/Translate?" +
            $"to={language}&text={encodedText}";
        var result = await client.GetStringAsync(uri);
        return XElement.Parse(result).Value;
    }
    private const string key = "Key";
    private static readonly HttpClient client = new HttpClient
    {
        DefaultRequestHeaders = { { "Ocp-Apim-Subscription-Key", key } }
    };

托管后，如果尝试从PostMan拨打电话，则会获得正确的结果 示例调用：azurewebsites.net/.../Ciao 结果我们得到的是“ HELLO”，所以直到这里都没有问题

如果我尝试从Ajax呼叫中调用相同的URL azurewebsites.net/.../Ciao，则会收到“对预检请求的响应未通过访问控制检查：它没有HTTP正常状态”

我的Ajax呼叫：

var settings = { “异步”：是的， “ crossDomain”：是的， “ url”：“ azurewebsites.net/.../Ciao”​​， “ method”：“ GET”， “标题”：{ “ cache-control”：“ no-cache”， “访问控制允许标题”：“ *” }} $。ajax（settings）.done（function（response）{console.log（response）; }）;

有人可以帮我吗？

Answer 1

发生上述情况的原因称为CORS（跨源资源共享）

在CORS的多个站点中有一些技巧。签出here

有几种解决问题的方法，让我们逐步进行。

1：将以下customHeaders添加到Web API服务器的web.config。

<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" />
        <add name="Access-Control-Allow-Credentials" value="true" />
    </customheaders>
</httpprotocol>

添加以上密钥后，尝试运行客户端应用程序，该问题将无法解决。该错误可以在Chrome的“开发工具”>“控制台”标签中看到。

如果使用Internet Explorer 10或11，则在“控制台”选项卡中，可以看到以下错误。

XMLHttpRequest: Network Error 0x2efd, Could not complete the operation due to error 00002efd.

2：从上述的web.config中删除标头。

3：我正在使用VS 2013，在Visual Studio中的“管理Nuget程序包”中搜索CORS。请确保已选择“在线”在左窗格中，并且可以看到Microsoft ASP.NET Web API 2.2跨域支持并进行安装如果未安装。如果您的Web API上已经完全安装了相同的软件包，则在该软件包上会看到一个绿色圆形圆圈的右标记。

4：首先，我们提到在实现帐户会员资格时会看到错误。现在要解决此问题，请将以下using语句添加到AccountController。 该属性可以应用于特定的功能级别，也可以应用于以下各项：

[EnableCors(origins: "*", headers: "*", methods: "*")]

理想情况下，以上属性应置于[Authorize]属性上方。

5：为了将CORS应用于Web API中的所有控制器，可以在WebApiConfig.cs中的Register方法的第一行中添加以下内容。

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

6：在使用成员资格数据库实现个人身份验证时，Visual Studio中的模板添加了ApplicationOAuthProvider.cs文件。在文件中，有一种方法可以授予资源凭据。方法名称是：

public override async Task GrantResourceOwnerCredentials
(OAuthGrantResourceOwnerCredentialsContext context)

在这种方法中，需要检查是否曾经添加过类似的东西。

context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", 
new[] { "yourdomain:yourpostnumber" });

如果在那里并且客户端尝试登录，则在“控制台”选项卡中可以看到以下错误

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:53005' is therefore not allowed access. The response had HTTP status code 500.

这是因为我们已经启用了config.EnableCors（）;。在WebApiConfig.cs中，并尝试添加context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "yourdomain:yourpostnumber" });

因此，请确保从ApplicationOAuthProvider.cs文件中删除context.OwinContext.Response.Headers.Add行并进行尝试。没有错误是可见的。

也可以参考CORS ISSUE

以获取更多参考。

希望有帮助。