已经在Apache服务器设置了跨域，并允许OPTION请求，但POST仍然被浏览器阻止？

Question

问题描述

Apache 服务器设置：

Header add Access-Control-Allow-Origin "http://***"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

此时，通过 axios.get 进行访问，没有跨域报错。但是通过 axios.post 提交数据，就报错。

No 'Access-Control-Allow-Origin' header is present on the requested resource.

众所周知，对于POST这样的复杂请求，Chrome 会发送一个OPTION请求进行预检（prolight），但是我已经允许了 OPTIONS 方法，却仍然不能解决问题。请问原因是什么？应该如何操作？

注：我参考了以下文章

https://dailc.github.io/2017/...

我并未多次设置 Access-Control-Allow-Origin （否则第一次GET请求也不会成功）

我根据此文章的说法对OPTIONS请求放行。 https://stackoverflow.com/que...

直接访问时，浏览器表明服务器返回如下：

Access-Control-Allow-Headers: origin, x-requested-with, content-type
Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS
Access-Control-Allow-Origin: http://***
Cache-Control: private, no-cache="set-cookie"
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=UTF-8
Date: Fri, 10 May 2019 09:48:57 GMT
Expires: Fri, 10 May 2019 09:48:58 GMT
Keep-Alive: timeout=2, max=100
Server: Apache/2
Transfer-Encoding: chunked
Vary: Accept-Encoding,User-Agent
X-Powered-By: PHP/5.6.40

第一次GET请求的结果：

Request URL: ***
Request Method: GET
Status Code: 200 OK
Remote Address: 103.251.89.195:443
Referrer Policy: no-referrer-when-downgrade
Access-Control-Allow-Headers: accept, authorization, content-type, origin, referer, x-csrf-token
Access-Control-Allow-Methods: OPTIONS, PUT, GET, POST, DELETE
Access-Control-Allow-Origin: ***
Cache-Control: private, no-cache="set-cookie"
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=UTF-8
Date: Fri, 10 May 2019 10:51:28 GMT
Expires: Fri, 10 May 2019 10:51:28 GMT
Keep-Alive: timeout=2, max=100
Server: Apache/2
Transfer-Encoding: chunked
Vary: Accept-Encoding,User-Agent
X-Powered-By: PHP/5.6.40
Provisional headers are shown
Accept: application/json, text/plain, */*
DNT: 1
Origin: ***
Referer: ***
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36

第二次的请求头：

Provisional headers are shown
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
DNT: 1
Origin: ***
Referer: ***
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36

第二次的响应头：

Allow: 
Connection: Keep-Alive
Content-Length: 232
Content-Type: text/html; charset=iso-8859-1
Date: Fri, 10 May 2019 10:57:14 GMT
Keep-Alive: timeout=2, max=99
Server: Apache/2

第二次POST请求的预请求报错：

OPTIONS *** (Method Not Allowed)
dispatchXhrRequest @ xhr.js?9456:178
xhrAdapter @ xhr.js?9456:12
dispatchRequest @ dispatchRequest.js?3ad9:59
Promise.then (async)
request @ Axios.js?268b:51
Axios.<computed> @ Axios.js?268b:71
wrap @ bind.js?e00f:9
(anonymous) @ auth.js?b4d8:18
Promise.then (async)
Vue.$auth.login @ auth.js?b4d8:14
doLogin @ Login.vue?03db:26
click @ Login.vue?cede:46
invokeWithErrorHandling @ vue.esm.js?c5de:1863
invoker @ vue.esm.js?c5de:2188
original._wrapper @ vue.esm.js?c5de:7559
:8080/?#/login:1 Access to XMLHttpRequest at '***ucp.php?mode=login' from origin 'http://publish.je.acgmuse.com:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
createError.js?8774:16 Uncaught (in promise) Error: Network Error
    at createError (createError.js?8774:16)
    at XMLHttpRequest.handleError (xhr.js?9456:87)

Answer 1

• Access-Control-Allow-Origin
  包含允许被调用的 源域名，即 host 部分，不包含协议，即 http

CORS 的 Origin 部分应包含 schema (http://、https://)，host、port。

Answer 2

说下我最后怎么解决的吧，换成了 Nginx，然后在 conf 里让直接所有 OPTIONS 请求返回 200。