js实现form表单上传文件 报错No 'Access-Control-Allow-Origin' header is present on the requested resource

这个错误是由于浏览器的同源策略导致的，可以通过在服务器端设置响应头来解决。具体来说，需要在服务器端的响应头中添加 Access-Control-Allow-Origin 字段，值为允许跨域请求的域名。例如，如果允许所有域名跨域请求，可以设置为：

Access-Control-Allow-Origin: *

如果只允许特定域名跨域请求，可以设置为：

Access-Control-Allow-Origin: http://example.com

另外，还需要在服务器端设置其他相关的响应头，例如 Access-Control-Allow-Methods、Access-Control-Allow-Headers 等，具体可以参考相关的文档。

相关问题

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

No 'Access-Control-Allow-Origin' header is present on the requested resource是一个跨域问题。这个问题通常发生在前端访问后端接口时，由于安全限制，浏览器会阻止跨域请求。要解决这个问题，有几种方法可以尝试。

一种方法是在后端接口或配置文件中添加跨域代码。可以使用以下代码来允许所有来源访问接口：
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
或者在过滤器中添加以下代码：
httpResponse.setHeader("Access-Control-Allow-Origin","*");
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
httpResponse.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");

另一种可能的原因是在配置文件或其他设置中重复配置了跨域。比如在FileUtil中配置了response.addHeader("Access-Control-Allow-Origin", "*")，然后又在CorsFilter中添加了一次配置。这样就会出现两个Access-Control-Allow-Origin问题。在这种情况下，只需要删除其中一个配置即可解决问题。

总结来说，解决"No 'Access-Control-Allow-Origin' header is present on the requested resource"问题的方法是添加跨域代码或删除重复的跨域配置。这样浏览器就能正确处理跨域请求了。

vue二次封装的axios报错 No 'Access-Control-Allow-Origin' header is present on the requested resource.

这个错误是CORS（跨源资源共享）策略引起的。CORS是一种浏览器机制，用于控制跨域资源请求的安全性。当你在浏览器中发送跨域请求时，浏览器会发送一个预检请求（preflight request）来检查服务器是否允许此请求。如果服务器没有正确配置响应头中的Access-Control-Allow-Origin字段，浏览器就会报错，显示"No 'Access-Control-Allow-Origin' header is present on the requested resource"。

在你提供的代码中，baseURL设置为"127.0.0.1:20011"，这可能导致发送跨域请求。为了解决这个问题，你需要在服务器端配置响应头，允许来自"127.0.0.1:20011"域的请求。

在你的代码中，你可以尝试在axios实例的配置中添加以下代码来解决跨域问题：

headers: {
"Access-Control-Allow-Origin": "http://127.0.0.1:20011",
"Access-Control-Allow-Methods": "GET, POST, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type",
"Access-Control-Allow-Credentials": "true"
}
请注意，这只是一个示例，你需要根据你的具体需求进行配置。另外，你也可以在服务器端配置响应头来解决跨域问题。

希望我的回答对你有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue跨域问题Response to preflight request doesn‘t pass access control check: No ‘Access-Control-...](https://blog.csdn.net/m0_45251955/article/details/122108170)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [Vue跨域问题 has been blocked by CORS policy:....No ‘Access-Control-Allow-Origin‘ header](https://blog.csdn.net/qq_40794785/article/details/108991340)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]