Angularjs 使用 browsersync post 方法作为选项发送

Angularjs with browsersync post method send as options

我有一个 Angular 1.6.4 应用程序使用浏览器与 gulp 同步。使用命令 "gulp server" 上传浏览器同步并在 webapi 2.0 c# 中发出 post 请求时,请求作为选项发送。

错误: 选项 ... 405(方法不允许)

XMLHttpRequest 无法加载...预检响应具有无效的 HTTP 状态代码 405

浏览器同步

browserSync.init({
        notify: false,
        cors: true,
        port: 6543,
        server: {
            baseDir: config.dir.src,
            routes: {
                "/bower_components": "bower_components"
            },
            middleware: function(req, res, next) {
                res.setHeader('Access-Control-Allow-Origin', '*');
                next();
            }
        }
    });

AngularJS请求

$http({
                    method: 'POST',
                    url: 'http://localhost/Teste/TesteController/Cadastrar',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    data: envelope
                }).then(function (response) {
                        deferred.resolve(response);
                    }, function (error) {
                        deferred.reject(error);
                    });

WebAPI

    [HttpPost]
    public IHttpActionResult Teste(Teste responsavel)
    {
        var saida = MontarSaida(_service.Cadastrar(responsavel, _serviceUsuario));
        return Ok(ResponseContent.Create("Ok", null, saida, 1));
    }

解决:加入web.config

<add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Authorization" />

Stask 上有很多答案。 尝试寻找 CORS

希望本教程对您有所帮助 https://www.html5rocks.com/static/images/cors_server_flowchart.png

P.S。您需要在后端的基本控制器中指定 CORS 的行为

某些浏览器(更具体地说 Chrome)通常会在执行 post 之前尝试执行 OPTIONS 调用。这是为了确保 CORS headers 是有序的。如果您没有在 API 控制器中处理 OPTIONS 调用,则会发生此错误:

public void Options() { }

此外,应该启用 OPTIONS 方法

 <add name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS, PUT, PATCH, DELETE" />