Проблема CORS, если "Content-type": "multipart / form-data" - PullRequest
Новая
       56

Проблема CORS, если "Content-type": "multipart / form-data"

0 голосов
/ 24 октября 2018

У меня есть два домена (example.com для клиента, api.example.com для остальных API), где я запрашиваю от клиента к API с учетом политики CORS.Предварительный запрос работает, как и ожидалось, и все остальные запросы (GET / POST / PUT / DELTE) работают хорошо, за исключением загрузки файла. Это означает, что если Content-type "multipart / form-data".

И я получаю следующую ошибку вКонсоль Chrome:

Доступ к XMLHttpRequest по адресу https://api.example.com/video/upload' из источника 'https://www.example.com' заблокирован политикой CORS: заголовок «Access-Control-Allow-Origin» отсутствует.присутствует на запрошенном ресурсе.

Здесь мой клиентский (vuejs) источник: 

var config = {
    headers: { "Content-Type": "multipart/form-data" },
    onUploadProgress(e) {
      if (e.lengthComputable) {
        self.percentage = Math.round(e.loaded / e.total * 100) + "%";
      }
    }
  };

  axios
    .post(apiUrl + `/video/upload`, formData, config)
    .then(response => {
      this.successes.push(
        response.data.videoName + " uploaded."
      );
    })
    .catch(e => {
      this.errors.push(message);
    });
},

И конфигурация nginx для CORS: 

server {
listen 443 ssl default_server http2;
listen [::]:443 ssl default_server ipv6only=on;
root /var/www/example/public;
index       index.php index.html index.htm;
server_name api.example.com:443;

add_header Access-Control-Allow-Origin "*" always;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
add_header Access-Control-Allow-Methods "GET, POST, PUT, OPTIONS,  DELETE";
add_header Access-Control-Allow-Headers "Content-Type, X-Auth-Token, Origin, Authorization";

Может кто угоднопожалуйста, дайте мне знать, что не так с этим кодом и конфигурацией ?!Цени любую помощь!

1 Ответ

0 голосов
/ 05 ноября 2018

Решено путем применения CORS на стороне приложения.

Подробно, когда браузер отправляет запрос предпечатной проверки, появляется ошибка.Итак, для предварительных запросов я вручную добавил заголовки на стороне приложения.Я использовал Laravel для бэкэнда, поэтому создал промежуточное ПО Cors как floowing: 

public function handle($request, Closure $next) {
    if ($request->getMethod() == "OPTIONS") {   
        $headers = [    
            'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, DELETE',    
            'Access-Control-Allow-Headers' => 'Content-Type, Origin, Authorization' 
        ];
        return \Response::make('OK', 200, $headers);    
    }   

    return $next($request);         
}
...