Question

当我尝试通过api发送电子邮件时，收到以下消息：

从原点“ https://api.urosciric.com/mail”到“ https://urosciric.com”处对XMLHttpRequest的访问已被CORS策略阻止：对预检请求的响应未通过访问控制检查：否'Access-Control-Allow-来源的标头出现在请求的资源上。

我已经看到了许多解决方案，它们都不相同，而且到目前为止都没有奏效。

角度代码：

    const httpOptions = {
      headers: new HttpHeaders({
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*"
      })
    };

    this.http.post('https://api.urosciric.com/mail',
      { firstName: this.FirstName, lastName: this.LastName, email: this.Email, phone: this.Phone, text: this.Text },
      httpOptions)
      .pipe(catchError(err => {
        this.onMailSend(false);
        return throwError(err);
      })).subscribe(data => {
        this.onMailSend(true);
        return data;
      });

Laravel（api）代码：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;
use Illuminate\Support\Facades\Validator;

use App\Mail\General;

class MailController extends Controller
{
    public function send(Request $request){

            $firstName = $request -> input('firstName');
            $lastName = $request -> input('lastName');
            $email = $request -> input('email');
            $text = $request -> input('text');
            $phone = $request -> input('phone');

            $to = "ciricbgd@gmail.com";
            $subject = "[urosciric.com] email from ".$firstName." ".$lastName;
            $txt = $text;
            $headers = "From: mail@urosciric.com";

            mail($to,$subject,$txt,$headers);

            return response()->json('Mail sent. Thank you!', 201); 

        return response()->json('Mail not sent. Please try contacting me directly at ciricbgd@gmail.com',400);
    }
}

在开发或生产模式下尝试时，出现此错误，但是当我使用邮差或api测试软件时，一切正常。

Answer 1

首先，您必须了解CORS策略响应以处理请求，后端/ API 始终负责。因此，对 Angular前端添加任何内容都无济于事。

第二，简单来说，大多数浏览器都具有CORS政策，以强制实施与 CSRF攻击相关的问题。因此，如果您使用隐身模式进行访问，则不会出现CORS错误。此外，当您使用 POSTMAN 或其他 API测试软件时，它们只是 Developer Tools ，而不是浏览器，因此它们不在乎 CORS 。

对于该解决方案，您需要创建一个全局中间件来处理此CORS问题。

如果您使用的是 Laravel API MicroFramework流明-

中间件handle()：

public function handle($request, \Closure $next)
{
    $headers = [
        'Access-Control-Allow-Origin'      => '*',
        'Access-Control-Allow-Methods'     => 'GET, POST, PUT, PATCH, OPTIONS, DELETE',
        'Access-Control-Allow-Headers'     => 'Accept, Content-Type, Origin, Authorization, X-Requested-With, Content-Language, Subject'
    ];

    if ($request->isMethod('OPTIONS'))
    {
        return response()->json('{"method":"OPTIONS"}', 200, $headers);
    }

    $response = $next($request);

    foreach($headers as $key => $value)
    {
        $response->header($key, $value);
    }

    return $response;
}

然后，在bootstrap/app.php中注册此中间件以使其工作：

$app->middleware([
   ...
   App\Http\Middleware\CorsMiddleware::class,
]);

因此，当您的API收到任何请求时，它将通过此中间件传递并被验证为有效请求。

Answer 2

您需要创建一个proxy.conf.json文件并向其中添加这些属性

{
"/": {
                "target": "http://api.urosciric.com/mail",
                "secure": false,
                "logLevel": "debug"
  }
}

然后您必须将此文件添加到angular.json下的options下，其路径如下所示：

"serve": {
 "options": {
        "browserTarget": "app:build",
        "proxyConfig": "src/proxy.conf.json"
      },
   }

对我有用的希望它能与您合作

对XMLHttpRequest的访问已被CORS策略阻止。请求的资源上不存在“ Access-Control-Allow-Origin”标头

2 个答案: