CORS проблема в угловом приложении - PullRequest
0 голосов
/ 27 сентября 2019

Я работаю над вызовом Ajax в приложении Angular и получаю CORS ISSUE

  1. Получение CORS ISSUE при отправке правильных данных на сервер. например: {userName: 'Anurag'}
  2. не получает CORS Issue , но получает результат [status] == 0 при отправке неправильных данных на сервер, например:'Anurag'
  3. также не получает никаких проблем в get metaord Api Взаимодействие с сервером, У меня проблема только в post metord

Как это возможно, что для POST Metord Api Взаимодействие с сервером, при отправке правильных данных , я получаю сообщение CORS и для отправки неверных данных , я не получаю проблему CORS, но сообщение об ошибке с результатом [Status] == 0

сведения о технологии:

  • FrontEnd: Angular
  • Backend: PHP (Laravel Framework)

Я поделюсь своим угловым кодом ниже:

файл 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-Headers в предварительном ответе.

core.js: 9110 ОШИБКА HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: «Unknown Error», url: «https://XXXXXXXXX.com/crmApi/public/api/userNameCheck", ok:false,…}

Чтобы устранить эту проблему, я поместил ниже код на странице контроллера, но все еще получаю ту же ошибку

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);
            }
        }
    }
}

Ответы [ 4 ]

0 голосов
/ 27 сентября 2019

Не добавляйте случайный код в инфраструктуру Laravel, просто установите библиотеку, которая делает эту работу.В вашем случае это может быть Tymon / JWT.Установите соответствующую версию, которая совместима с вашей версией Laravel.Эта библиотека дает вам возможность применять CORS ко всем маршрутам, или вы можете выбрать те, которые вам нужны.Кроме того, ваш выбор добавления заголовков в контроллеры является неудачным, для этого лучше использовать промежуточное ПО.

0 голосов
/ 27 сентября 2019

Сначала проверьте заголовок ответа (консоль chrome). Консоль

Но лучше использовать промежуточное программное обеспечение для определения ответа заголовка, как показано ниже:

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

Мохамед.

0 голосов
/ 27 сентября 2019

Попробуйте,

Перейдите по этому пути на консоли в вашей системе C:\Program Files (x86)\Google\Chrome\Application>

Затем введите ниже команду chrome.exe --allow-file-access-from-files --disable-web-security --user-data-dir --disable-features=CrossSiteDocumentBlockingIfIsolating

Это работает для меня.

0 голосов
/ 27 сентября 2019

У меня была такая же проблема, когда я создавал что-то похожее: промежуточное ПО laravel cors

И я добавлял каждый запрос в угловом формате:

httpOptions = {
    headers: new HttpHeaders({
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            // 'Authorization': ''
        }
    ),
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...