Angular应用程序中的CORS问题

问题描述 投票:-1回答:3

我正在Angular应用程序中进行Ajax调用并获取CORS ISSUE

技术细节:

  • FrontEnd:Angular
  • 后端:PHP(Laravel Framework)

我在下面共享我的Angular代码:

component.ts文件

   checkusername(value){
     this.res.usernameCheck({"username": this.userSignup.value.username}).subscribe(result => {
          console.log(result);
        })
      }

服务文件

usernameCheck(data) : Observable<any>{
     console.log(data);
     return this.http.post(this.checkuserName , data);
   }

在调用HTTP请求时我低于给定的错误

访问XMLHttpRequest在'https://www.XXXXXXXXX.com/crmApi/public/api/userNameCheck'来自来源“ http://localhost:4200”的信息已被CORS政策阻止:请求标头字段的内容类型不允许飞行前响应中的Access-Control-Allow-Header。

core.js:9110错误HttpErrorResponse。{标题:HttpHeaders,状态:0,statusText:“未知错误”,网址:“https://XXXXXXXXX.com/crmApi/public/api/userNameCheck”,好的:错误,…}

为了解决此问题,我在控制器页面中放置了以下代码,但仍然出现相同的错误

header("Access-Control-Allow-Origin: *");
        header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
        header('Access-Control-Allow-Headers: Authorization, Origin, Content-Type, X-Auth-Token');
        header('Access-Control-Allow-Credentials: true');

我在下面共享我的后端PHP代码

Controller.php这样

<?php

namespace App\Http\Controllers\login;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\loginModel\signupModel;

class signupController extends Controller
{
    public function __construct()
    {
        header("Access-Control-Allow-Origin: *");
        header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
        header('Access-Control-Allow-Headers: Authorization, Origin, Content-Type, X-Auth-Token');
        header('Access-Control-Allow-Credentials: true');
        // header('Cache-Control', 'no-cache, must-revalidate');
        // header( 'Access-Control-Allow-Headers: Authorization, Content-Type' );
    }
    public function countryCode()
    {
        $signupModel = new signupModel();
        $data = $signupModel->countryCode();
        // header("Access-Control-Allow-Origin: *");
        return response()->json($data);
    }
    public function jobTitle()
    {
        // $headers = $header = request()->headers->all();
        // print_r($headers);exit();
        $signupModel = new signupModel();
        $data = $signupModel->jobTitle();
        // header("Access-Control-Allow-Origin: *");
        return response()->json($data);
    }
    public function userNameCheck(Request $request)
    {
        $username=$request->json()->get('username');
        // print_r($username);exit();
        // header("Access-Control-Allow-Origin: *");
        // header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
        // header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
        if($username == '')
            return response()->json(["status"=>"0","message"=>"Please provide username"]);
        else
        {
            $signupModel = new signupModel();
            $data = $signupModel->userNameCheck($username);
            // print_r($data);exit();
            if($data)
                return response()->json(["status"=>"1","message"=>"username exist"]);
            else
                return response()->json(["status"=>"0","message"=>"username does not exist"]);
        }
    }
    public function signUp(Request $request)
    {
        $name=$request->json()->get('name');
        $username=$request->json()->get('username');
        $password=$request->json()->get('password');
        $job_title=$request->json()->get('job_title');
        $job_role=$request->json()->get('job_role');
        $email=$request->json()->get('email');
        $country_code=$request->json()->get('country_code');
        $phone_number=$request->json()->get('phone_number');
        $addstr1=$request->json()->get('addstr1');
        $country=$request->json()->get('country');
        $state=$request->json()->get('state');
        $city=$request->json()->get('city');
        $postal_code=$request->json()->get('postal_code');
        $tokenData=md5(date('ymdhisa')).$username.$email;
        $token = hash_hmac('sha256',$tokenData,true);
        $token = base64_encode($token);
        // print_r($token);exit();
        // header("Access-Control-Allow-Origin: *");
        if($name == '')
            return response()->json(["status"=>"0","message"=>"Please provide name"]);
        elseif($username == '')
            return response()->json(["status"=>"0","message"=>"Please provide username"]);
        elseif($password == '')
            return response()->json(["status"=>"0","message"=>"Please provide password"]);
        elseif($job_title == '')
            return response()->json(["status"=>"0","message"=>"Please provide job title"]);
        elseif($job_role == '')
            return response()->json(["status"=>"0","message"=>"Please provide job role"]);
        elseif($email == '')
            return response()->json(["status"=>"0","message"=>"Please provide email"]);
        elseif($country_code == '')
            return response()->json(["status"=>"0","message"=>"Please provide country code"]);
        elseif($phone_number == '')
            return response()->json(["status"=>"0","message"=>"Please provide phone number"]);
        else
        {
            $signupModel = new signupModel();
            $userCheck = $signupModel->userNameCheck($username);
            // print_r($userCheck);exit();
            if($userCheck)
            {
                return response()->json(["status"=>"0","message"=>"User exist"]);
            }
            else
            {
                $data = $signupModel->signUp($name,$username,$password,$job_title,$job_role,$email,$country_code,$phone_number,$addstr1,$country,$state,$city,$postal_code,$token);
                return response()->json($data);
            }
        }
    }
}
php angular laravel cors angular6
3个回答
1
投票
当我构建类似的东西时,我遇到了同样的问题:laravel cors middleware

而且我在以下位置添加了每个请求:

httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Accept': 'application/json', // 'Authorization': '' } ),


0
投票
首先检查您的响应标头(Chrome控制台)。Console

但是最好使用中间件cors如下指定标头响应:

https://gist.github.com/DavidCWebs/4e4adde53a9c54f94e25e8a72f1251e8

穆罕默德。


0
投票
尝试一下,

在系统中的控制台C:\Program Files (x86)\Google\Chrome\Application>上通过此路径导航

然后在命令chrome.exe --allow-file-access-from-files --disable-web-security --user-data-dir --disable-features=CrossSiteDocumentBlockingIfIsolating中输入以下内容

这对我有用。

© www.soinside.com 2019 - 2024. All rights reserved.