Question

我有一个使用浏览器同步和gulp的Angular 1.6.4应用程序。使用命令＆＃34; gulp server＆＃34;上传Browser-sync时当在webapi 2.0 c＃中发布帖子请求时，请求将作为选项发送。

错误： 选项... 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();
            }
        }
    });

Angular JS请求

$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" />

Answer 1

某些浏览器（更具体地说是Chrome）通常会在发帖之前尝试进行OPTIONS调用。这是为了确保CORS标头按顺序排列。如果您未在API控制器中处理OPTIONS调用，则会发生此错误：

public void Options() { }

此外，应启用OPTIONS方法

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

Answer 2

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

我希望这对你有所帮助 https://www.html5rocks.com/static/images/cors_server_flowchart.png

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

使用browsersync post方法的Angularjs作为选项

2 个答案: