Wordpress API-Ionic GET-“ Access-Control-Allow-Origin”标头包含多个值“ *，*”

Question

am currently building some custom API's using WordPress API, and works great as calling from browser as this link:

https://laundrylocker-eg.com/wp-json/wp/v2/delivery-locations

response in JSON nothing goes wrong, so from Ionic application i try to call this api to get callback this data but faced this CORS Issue and try to fix it nothing works like disable CORS in chrome and using plugin enabling CORS for all domains as development phase

CORS PLUGIN IMG

CONSOLE ERROR

Failed to load https://laundrylocker-eg.com/wp-json/wp/v2/pickup-locations/2018-04-03 : Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Origin ' http://localhost:8100 ' is therefore not allowed access. core.js:1350 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}

REQUEST INFORMATION

Request URL: https://laundrylocker-eg.com/wp-json/wp/v2/pickup-locations/2018-04-03

Request Method: OPTIONS

Status Code: 200 OK

Remote Address: 50.87.248.230:443

Referrer Policy: no-referrer-when-downgrade

Access-Control-Allow-Credentials: true

Access-Control-Allow-Credentials: true

Access-Control-Allow-Headers: Authorization, Content-Type

Access-Control-Allow-Headers: Authorization, Content-Type, Content-Range,

Content-Disposition, Content-Description, Access-Control-Request-Method

Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE

Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS

Access-Control-Allow-Origin: *

Access-Control-Allow-Origin: *

Access-Control-Expose-Headers: X-WP-Total, X-WP-TotalPages

Allow: GET

Cache-Control: max-age=21600

Connection: keep-alive

Content-Encoding: gzip

Content-Length: 116

Content-Type: application/json; charset=UTF-8

Date: Tue, 03 Apr 2018 12:02:28 GMT

Expires: Tue, 03 Apr 2018 18:02:28 GMT

Link: https://laundrylocker-eg.com/wp-json/ ; rel="https://api.w.org/"

Server: nginx/1.12.2

Answer 1

It's not that you are returning a single ACAO header with a value of *, * - it's that you are returning duplicate CORS headers, and the browser has merged them.

Somewhere in your code (or in the code of the packages you're using), the CORS headers are being added twice. My guess is that you have somehow added two CORS-enablement packages or something like that, and they're both adding CORS response headers...

Since the value of the two Access-Control-Allow-Headers and Access-Control-Allow-Methods headers are different, it should be easy enough to search for where they are being added and remove the duplication.