Laravel Ajax 请求，没有“Access-Control-Allow-Origin”标头

Question

今天我使用 Heroku 扩展了我的工作流程，当我启动并运行所有内容并开始测试注册/登录模式等内容时，我的控制台收到了这个错误。

从源“https://app-name.herokuapp.com”对“http://app-name.herokuapp.com/register”处的 XMLHttpRequest 的访问已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。

尝试将 Content-Security-Policy 添加到我的布局文件的标头中，还将 X-CSRF-TOKEN 添加到我的 ajax 请求标头中删除了部分错误，但随后只是搜索了不同的解决方案并尝试了它们。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

 $(document).on('submit', '#formRegister', function(e) {
            e.preventDefault();

            $('input+small').text('');
            $('#formRegister input').removeClass('is-invalid');

            $.ajax({
                method: $(this).attr('method'),
                url: $(this).attr('action'),
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Access-Control-Allow-Methods' : 'POST',
                    'Access-Control-Allow-Headers' : 'X-Requested-With, Content-Type, X-Auth-Token, Origin, Authorization'
                },
                data: $(this).serialize(),
                dataType: "json",
                crossDomain: false
            })
                .done(function(data) {
                    $('.success-registered').removeClass('d-none');
                    $('#formRegister input').val('');
                    setTimeout(function() {
                        $('.success-registered').addClass('d-none');
                        location.reload();
                    }, 3000);
                    $('#login').modal('hide');
                })
                .fail(function(data) {
                    if (data.status === 422 && data.responseJSON) {
                        if (Object.keys(data.responseJSON.errors).length) {
                            for (field in data.responseJSON.errors) {
                                var error = data.responseJSON.errors[field];
                                var input = '#formRegister input[name=' + field + ']';
                                $(input).addClass('is-invalid');
                                $(input).next('span').find('strong').text(error[0]);
                            }
                        }
                    }
                });
        });

public function register(Request $request)
    {
        $this->validator($request->all())->validate();

        event(new Registered($user = $this->create($request->all())));

        $this->guard()->login($user);

        return $this->registered($request, $user)
            ?: response()->json();
    }

 protected function sendLoginResponse(Request $request)
    {
        $request->session()->regenerate();

        $this->clearLoginAttempts($request);

        return $this->authenticated($request, $this->guard()->user())
            ?: response()->json();
    }

除了来自控制器的成功请求，我的验证和页面重新加载的 JSON 输出除外。

Answer 1

您的网站有不同的协议。一个使用http，另一个使用https。根据MDN：

当 Web 应用程序请求的资源与它自己的来源不同（域、协议 和端口）时，它会执行跨域 HTTP 请求。

——Cross-Origin Resource Sharing

要解决此问题，请对两个站点使用相同的协议。

Answer 2

在标题中：

<meta name="csrf-token" content="{{ csrf_token() }}" />

在表单中添加 csrf 字段

<form action="your action" method="post">
  @csrf

  <!-- your other fields -->
</form>

在js代码中：

$(document).on('submit', '#formRegister', function(e) {
            e.preventDefault();

            $('input+small').text('');
            $('#formRegister input').removeClass('is-invalid');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                method: $(this).attr('method'),
                url: $(this).attr('action'),                
                data: $(this).serialize(),
                dataType: "json",
                cache: false,
                crossDomain: false
            })
                .done(function(data) {
                    $('.success-registered').removeClass('d-none');
                    $('#formRegister input').val('');
                    setTimeout(function() {
                        $('.success-registered').addClass('d-none');
                        location.reload();
                    }, 3000);
                    $('#login').modal('hide');
                })
                .fail(function(data) {
                    if (data.status === 422 && data.responseJSON) {
                        if (Object.keys(data.responseJSON.errors).length) {
                            for (field in data.responseJSON.errors) {
                                var error = data.responseJSON.errors[field];
                                var input = '#formRegister input[name=' + field + ']';
                                $(input).addClass('is-invalid');
                                $(input).next('span').find('strong').text(error[0]);
                            }
                        }
                    }
                });
        });