Laravel 5.4 크로스 도 메 인 JS 크로스 도 메 인 문제 해결

18857 단어 NginxPHP
질문:
laravel 에서 열 린 인 터 페 이 스 를 이용 한 다음 에 활동 부분 은 H5 로 만 들 었 고 업데이트 가 편리 하 며 클 라 이언 트 원생 을 사용 하지 않 았 으 나 H5 로 인 터 페 이 스 를 요청 한 것 은 크로스 도 메 인 문 제 를 보고 한 것 입 니 다.
jquery.min.js:4 Access to XMLHttpRequest at 'http://**.**.**.**:8085/index.php/and/v2.0.0/partner/answer' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
send @ jquery.min.js:4
ajax @ jquery.min.js:4
(anonymous) @ index.html:205
dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3
jquery.min.js:4 POST http://**.**.**.**:8085/index.php/and/v2.0.0/partner/answer net::ERR_FAILED

해결 방안
  • 전단 에 JsonP 요청 을 사용 하거나 프레임 워 크 요청
  • PHP 인터페이스의 방법 에 추가 header
       header('Access-Control-Allow-Origin:*');
       //     
       header('Access-Control-Allow-Methods:*');
       //   
       header('Access-Control-Allow-Headers:*');
       //      
       header('Access-Control-Allow-Credentials:false');//cookie   true
    
  • NGINX 대리 설정
    
    server
    {
       listen 8084;
       server_name localhost;
       location /index.php/ {
           proxy_pass http://localhost:8085;
    
           #            ,*    
           add_header Access-Control-Allow-Methods *;
    
           #          ,              
           add_header Access-Control-Max-Age 3600;
           #    cookie          ,    true
           add_header Access-Control-Allow-Credentials true;
    
           #              (             ) 
           #   $http_origin                  *     cookie      * 
           add_header Access-Control-Allow-Origin $http_origin;
    
           #                
           add_header Access-Control-Allow-Headers 
           $http_access_control_request_headers;
    
           #   OPTIONS    ,            
           #                 
           if ($request_method = OPTIONS){
               return 200;
           }
       }
    }
    
  • laravel 제3자 가방 이용 composer require barryvdh/laravel-cors
         :config/app.php,      
       
       Barryvdh\Cors\ServiceProvider::class,
           :
                   ,       middleware    :
       
          app/Http/kernel.php   :
       
       protected $middleware = [
           // ...
           \Barryvdh\Cors\HandleCors::class,
       ];
             
                   ,           OK
       
       protected $middlewareGroups = [
           'web' => [
              // ...
           ],
       
           'api' => [
               // ...
               \Barryvdh\Cors\HandleCors::class,
           ],
       ];
           
           :
       
       php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"
              :
       
       return [
            /*
            |--------------------------------------------------------------------------
            | Laravel CORS
            |--------------------------------------------------------------------------
            |
            | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
            | to accept any value.
            |
            */
           'supportsCredentials' => false,
           'allowedOrigins' => ['*'],
           'allowedHeaders' => ['Content-Type', 'X-Requested-With'],
           'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
           'exposedHeaders' => [],
           'maxAge' => 0,
       ]
    
  • 중간 부품 을 준비 하여 중간 부품 을 만 듭 니 다:
    
    /**
     * Created by PhpStorm.
     * User: machi
     * Date: 2018/5/24
     * Time:   2:39
     */
    namespace App\Http\Middleware;
    use Illuminate\Http\Request;
    use Closure;
    class Cors
    {
        /**
         * Handle an incoming request.
         *
         * @param  \Illuminate\Http\Request  $request
         * @param  \Closure  $next
         * @return mixed
         */
        public function handle(Request $request, Closure $next)
        {
            if(!empty($_SERVER["HTTP_ORIGIN"])){
                $allow_origin=$_SERVER["HTTP_ORIGIN"];
            }else{
                $allow_origin='http://test.senpuyun.com';
            }
            if(strtoupper($_SERVER['REQUEST_METHOD'])== 'OPTIONS'){
                return response('ok',200)
                    ->header('Access-Control-Allow-Origin', $allow_origin)
                    ->header('Access-Control-Allow-Credentials','true')
                    ->header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
                    ->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS, DELETE,HEAD');
            }else{
                $response = $next($request);
                $response->header('Access-Control-Allow-Origin', $allow_origin);
                $response->header('Access-Control-Allow-Credentials','true');
                $response->header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
                $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS, DELETE,HEAD');
                return $response;
            }
        }
    }
    
    등록: bootstrap / app. php
    $app->routeMiddleware([
        'auth' => App\Http\Middleware\Authenticate::class,
        'jwtauth'    => App\Http\Middleware\JwtAuthenticate::class,
        'jwtrefresh'    => App\Http\Middleware\JwtRefreshToken::class,
        'partner' => App\Http\Middleware\Partner::class,
        'cors' =>\App\Http\Middleware\Cors::class,
        //'jwt.auth'    => Tymon\JWTAuth\Middleware\GetUserFromToken::class,
        //'jwt.refresh' => Tymon\JWTAuth\Middleware\RefreshToken::class,
    ]);
    
    경로 설정:
    $app->group(['prefix' => 'and/{version}'], function () use($app){
        $app->group(['middleware' => 'cors'], function($api) {
            $api->group(['middleware' => 'partner'], function($api1) {
                $api1->post('partner/answer', ['as' => 'partner.answer', 'uses' => 'PartnerController@answer']);
            });
        });
     )};   
    
    본인 이 쓰 는 마지막 방법.그리고 중복 설정 을 피해 야 합 니 다.중복 설정 에 오류 가 발생 할 수 있 습 니 다 The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. contains multiple values' * '는 두 번 의 크로스 도 메 인 을 설정 하 였 으 나 한 가지 만 허용 되 었 습 니 다. 그 중 하 나 를 제거 하면 됩 니 다.서버 가 도 메 인 을 넘 을 수 있 도록 설정 되 어 있 으 면 Nginx 프 록 시 를 사용 할 필요 가 없습니다 (또는 Nginx 를 사용 하지 않 아 도 됩 니 다)
  • 좋은 웹페이지 즐겨찾기