网页功能被CORS策略拦截，缺少Access-Control-Allow-Origin头如何解决？

你遇到的CORS错误本质是：前端页面所在的源（协议+域名+端口三者组合）和你请求的url_get_question对应的后端接口源不一致，浏览器出于安全的同源策略限制，禁止跨域请求资源。你可以根据场景选择以下任意一种方案解决：

方案1：后端接口添加CORS响应头（生产环境最推荐） #

在url_get_question对应的后端服务的响应头中添加Access-Control-Allow-Origin字段：

• 若允许所有域名访问该接口，设置值为*
• 若仅允许你的前端页面域名访问，设置值为你前端页面的完整源，例如https://www.your-frontend-domain.com

如果你的请求带自定义头或者非GET/POST简单请求，还需要额外配置Access-Control-Allow-Methods、Access-Control-Allow-Headers等响应头。
不同后端的配置示例：

• Nginx：在接口对应的location配置块中添加add_header Access-Control-Allow-Origin *;
• Node.js（Express框架）：直接引入cors中间件即可一键配置
• Java（SpringBoot框架）：在接口类或方法上添加@CrossOrigin注解，或做全局CORS配置

方案2：本地开发阶段用代理转发 #

如果是本地调试时出现的问题，可以用前端构建工具自带的代理功能，把接口请求转发到后端地址。本地开发服务器和前端页面同源，就不会触发CORS拦截。比如Vue项目可以在vue.config.js中配置devServer.proxy，React项目可以配置setupProxy.js实现代理。

方案3：前后端部署到同一个源 #

把你的HTML、JS等静态资源和url_get_question接口部署在同一个协议、域名、端口下，天然满足同源策略，不会触发CORS拦截。

另外注意检查你的代码中url_get_question变量是否已经正确赋值为接口的完整地址，避免拼写错误导致请求异常。

内容的提问来源于stack exchange，提问作者aiorbits Hans