一、问题背景

部署后端项目，在支持浏览器的接口请求时，由于浏览器的同源策略，特别容易遇到跨域问题。
比如浏览器访问的网页的域名是：https://www.baidu.com，但是在这个网页中通过网络框架请求一个接口：https://api.baidu.com/api/recommend时，由于同源策略（这里不作特别解释，网上解释很多），可以知道网页域名和接口域名不同源，那么这个接口在请求时，浏览器会报cors error（跨域错误）。

二、问题描述：

Access to XMLHttpRequest at 'https://api.xxx.com/api/recommend/query' from origin 'https://www.xxx.com' has been blocked by CORS policy: Request header field userid is not allowed by Access-Control-Allow-Headers in preflight response。

三、知识点

1. 浏览器有同源策略，不会允许非同源请求通过（但可以解决）。
2. 像是postman或者原生app中发起请求，不会有同源策略的问题。
3. 如果网页域名和网页中的接口请求的域名非同源，解决跨域问题，需要后端接口设置允许跨域，那么浏览器也是会让服务器允许跨域的。
4. 浏览器的网页在发起跨域请求时，一般首先会发一个options的预检preflight请求，检查服务端接口是否允许跨域，如果服务端接口设置允许跨域，那么浏览器会再次发一个正常的请求，得到正确的响应。

四、问题解决

如二的问题描述，是在预检请求的时候，发现request header中有一个userId的字段，服务端接口并没有为这个userId字段设置：Access-Control-Allow-Headers，而且这个字段不是约定俗成的header 字段，所以浏览器将这次请求定义为跨域失败。
所以如果前端userId字段非传不可的话，那么就让后端接口在跨域时设置一下：

"Access-Control-Allow-Headers", "userId"