为啥我得到“没有访问控制允许来源”

Posted 2023-03-04

【中文标题】为啥我得到“没有访问控制允许来源”

【英文标题】：Why i am getting 'No Access-Control-Allow-Origin'为什么我得到“没有访问控制允许来源”

【发布时间】：2020-03-10 10:13:09

【问题描述】：

我收到此错误“从源“http://127.0.0.1:8000”访问 XMLHttpRequest 在“http://localhost/api/auth/register”已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“访问控制-请求的资源上存在 Allow-Origin' 标头。"

<template>
    <div class="container mt-2">
                <form autocomplete="off" @submit.prevent="register" method="post">
                    <div class="form-group" v-bind:class=" 'has-error': has_error && errors.email ">
                        <label for="email">E-mail</label>
                        <input type="email" id="email" class="form-control bg-light border-0 small" placeholder="[e-mail]" v-model="email">
                        <span class="help-block" v-if="has_error && errors.email"> errors.email </span>
                    </div>
                    <div class="form-group" v-bind:class=" 'has-error': has_error && errors.password ">
                        <label for="password">Password</label>
                        <input type="password" id="password" class="form-control bg-light border-0 small" v-model="password">
                        <span class="help-block" v-if="has_error && errors.password"> errors.password </span>
                    </div>
                    <div class="form-group" v-bind:class=" 'has-error': has_error && errors.password ">
                        <label for="password_confirmation">Conform Password</label>
                        <input type="password" id="password_confirmation" class="form-control bg-light border-0 small" v-model="password_confirmation">
                    </div>
                     <div class="alert alert-danger" v-if="has_error && !success">
                      <p v-if="error == 'registration_validation_error'">Validation error</p>
                      <p v-else>Please fill all the fields to get registered</p>
                     </div>
                     <input type="hidden" name="_token" :value="csrf">
                    <div class="text-center pb-3">
                    <button type="submit" class="btn btn-success btn-sm" style="background-color:#00A7F5;border:none;">Register</button>
                    </div>
          </form>
    </div>
</template>
<script>
  export default 
    data() 
      return 
        email: '',
        password: '',
        password_confirmation: '',
        csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        has_error: false,
        error: '',
        errors: ,
        success: false
      
    ,
    methods: 
      register() 
        var app = this
        this.$auth.register(
          data: 
            email: app.email,
            password: app.password,
            password_confirmation: app.password_confirmation
          ,
          success: function () 
            app.success = true
          ,
          error: function (res) 
            app.has_error = true
            app.error = res.response.error
            app.errors = res.response.errors || 
          
        )
      
    
  
</script>

如果失败，来自控制器的响应

 $a = Validator::make($request->all(), [
            'email' => 'required|email|unique:users',
            'password'  => 'required|min:6|confirmed',
        ]);
 if ($a->fails())
        
            return response()->json([
                'status' => 'error',
                'errors' => $a->errors()
            ], 422);
        

如果一切正常，那么

return response()->json(['status' => 'success'], 200);

请让我知道这有什么问题，有没有更好的方法来处理错误。请分享链接，我无法正确处理错误。 感谢所有帮助。

【参考方案1】：

CORS 策略严格检查域和端口。因此，使两者相同将是解决方案。

【讨论】：

我该怎么做？

在同一站点地址下托管服务。 CORS 解决方案不是一个好的选择。对于一个小项目，这是不必要的。对于大型项目，安全性很简单。

【参考方案2】：

你需要在你的项目中添加 CORS 服务提供者，像这样：https://github.com/barryvdh/laravel-cors