[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$feI1mfKqbXD--puPeioKZKr_j2wRH6Nao77T8G6poFmg":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":20,"category":21,"subCategoryId":7,"subCategory":23,"comments":25,"status":7,"reason":12,"notice":12,"visitCount":57,"commentCount":58,"keywords":59},1,"2024-01-02T15:54:06.348Z","浏览器跨域-Request header field userid is not allowed ...","# 一、问题背景\n部署后端项目，在支持浏览器的接口请求时，由于浏览器的同源策略，特别容易遇到跨域问题。\n比如浏览器访问的网页的域名是：`https://www.baidu.com`，但是在这个网页中通过网络框架请求一个接口：`https://api.baidu.com/api/recommend`时，由于**同源策略**（这里不作特别解释，网上解释很多），可以知道网页域名和接口域名不同源，那么这个接口在请求时，浏览器会报**cors error**（跨域错误）。\n# 二、问题描述：\n`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。`\n# 三、知识点\n1. 浏览器有同源策略，不会允许非同源请求通过（但可以解决）。\n2. 像是postman或者原生app中发起请求，不会有同源策略的问题。\n3. 如果网页域名和网页中的接口请求的域名非同源，解决跨域问题，需要后端接口设置允许跨域，那么浏览器也是会让服务器允许跨域的。\n4. 浏览器的网页在发起跨域请求时，一般首先会发一个options的预检preflight请求，检查服务端接口是否允许跨域，如果服务端接口设置允许跨域，那么浏览器会再次发一个正常的请求，得到正确的响应。\n# 四、问题解决\n如二的问题描述，是在预检请求的时候，发现`request header`中有一个`userId`的字段，服务端接口并没有为这个`userId`字段设置：`Access-Control-Allow-Headers`，而且这个字段不是约定俗成的`header` 字段，所以浏览器将这次请求定义为跨域失败。\n所以如果前端`userId`字段非传不可的话，那么就让后端接口在跨域时设置一下：\n```language\n\"Access-Control-Allow-Headers\", \"userId\"\n```\n\n\n\n\n\n","部署后端项目，在支持浏览器的接口请求时，由于浏览器的同源策略，特别容易遇到跨域问题。\n比如浏览器访问的网页的域名是：https://www.baidu.com，但是在这个网页中通过网络框架请求一个接口：https://api.baidu.com/api/recommend时，由于同源策略（这里不作特别解释，网上解释很多），可以知道网页域名和接口域名不同源，那么这个接口在请求时，浏览器会报cors ","",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":7,"avatar":17,"sign":18,"createdAt":19},"13121171998","全栈老韩","https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":20,"name":22},"IT技术",{"id":7,"name":24,"parentId":20},"浏览器",[26,46],{"id":7,"createAt":27,"content":28,"articleId":7,"userId":13,"user":29,"replyToUid":30,"replyToUser":31,"status":7,"statusDes":12,"replies":33},"2024-01-20T04:53:18.012Z","跨域的其他问题，等有时间我陆续总结一下😄",{"phone":15,"userId":13,"nickName":16,"vipType":7,"avatar":17,"sign":12,"createdAt":19},0,{"phone":12,"userId":30,"nickName":12,"vipType":30,"avatar":12,"sign":12,"createdAt":32},"0001-01-01T00:00:00Z",[34],{"id":35,"createAt":36,"content":37,"articleId":7,"userId":38,"user":39,"replyToUid":13,"replyToUser":44,"status":7,"statusDes":12,"replies":45},5,"2024-03-16T03:46:55.897Z","大哥，有什么好资料推荐吗？",525978185445445,{"phone":40,"userId":38,"nickName":41,"vipType":7,"avatar":42,"sign":12,"createdAt":43},"16100000003","上班墨鱼","https://image.xinwei.ltd/bbd06233d9b5c67c9f8ddd35b63cb81f1710561355517.jpeg","2024-03-16T00:30:44.932Z",{"phone":12,"userId":30,"nickName":12,"vipType":30,"avatar":12,"sign":12,"createdAt":32},null,{"id":47,"createAt":48,"content":49,"articleId":7,"userId":50,"user":51,"replyToUid":30,"replyToUser":56,"status":7,"statusDes":12,"replies":45},7,"2024-03-16T04:31:26.141Z","大佬，最近我在面试，希望出点面试相关的啊",525978358100037,{"phone":52,"userId":50,"nickName":53,"vipType":7,"avatar":54,"sign":12,"createdAt":55},"16100000004","萌起路飞","https://image.xinwei.ltd/b79ced9ab7f28cd9e6b949c7530184931710561166754.jpg","2024-03-16T00:31:27.083Z",{"phone":12,"userId":30,"nickName":12,"vipType":30,"avatar":12,"sign":12,"createdAt":32},678,3,"前端,跨域,浏览器跨域,request header,CORS policy"]