我正在Angular应用程序中进行Ajax调用并获取CORS ISSUE
技术细节:
我在下面共享我的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);
}
}
}
}
而且我在以下位置添加了每个请求:
httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Accept': 'application/json',
// 'Authorization': ''
}
),
但是最好使用中间件cors如下指定标头响应:
https://gist.github.com/DavidCWebs/4e4adde53a9c54f94e25e8a72f1251e8
穆罕默德。
在系统中的控制台C:\Program Files (x86)\Google\Chrome\Application>
上通过此路径导航
然后在命令chrome.exe --allow-file-access-from-files --disable-web-security --user-data-dir --disable-features=CrossSiteDocumentBlockingIfIsolating
中输入以下内容
这对我有用。