ajax 上传图片成功 使用的时候出现跨域问题
$.ajax上传的图片 使用的时候报错XMLHttpRequest cannot load
!icc1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7456' is therefore not allowed access.
图片可以在浏览器直接打开预览
用官方sdk uploader和官方工具上传的图片不会出现这个问题 由于前端是cocoscreator 不了解uploader的browse_button怎么去赋值 就用不了- -
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
遇到“XMLHttpRequest cannot load ... No 'Access-Control-Allow-Origin' header is present on the requested resource.”的错误，表明您在尝试通过$.ajax从localhost发起请求加载图片资源时遇到了跨域问题。即使图片能够直接在浏览器中预览，AJAX请求由于同源策略限制，仍然需要目标服务器明确允许您的源进行跨域访问。根据知识库中的参考资料，解决此问题通常涉及以下步骤：
解决方案
1. 服务器端配置CORS
- 如果您有权限修改图片服务器的CORS设置：
- 确保响应头中包含
Access-Control-Allow-Origin，并将其值设置为您的前端应用的源地址（例如'http://localhost:7456'）或*以允许所有来源。具体操作需参照服务器类型（如Nginx、Apache或特定云服务如阿里云OSS）的文档来配置。
- 确保响应头中包含
2. 使用代理服务器
- 如果无法直接修改图片服务器设置：
- 在开发环境中，可以使用代理服务器转发请求，让请求看似来自同一源。对于前端开发，许多现代框架（如Vue、React）的开发服务器支持代理配置。Cocos Creator虽然原生不直接支持代理配置，但您可以考虑在本地搭建一个简易的HTTP代理服务器（如使用
http-proxy-middleware），将请求代理到实际图片服务器。
- 在开发环境中，可以使用代理服务器转发请求，让请求看似来自同一源。对于前端开发，许多现代框架（如Vue、React）的开发服务器支持代理配置。Cocos Creator虽然原生不直接支持代理配置，但您可以考虑在本地搭建一个简易的HTTP代理服务器（如使用
3. 检查图片上传方式
- 考虑到您提到官方SDK和工具上传的图片没有遇到跨域问题，这可能意味着这些工具在上传时已经处理了CORS或者上传至的存储桶已正确配置了CORS规则。
- 如果可能，深入研究官方SDK的上传机制，看是否能借鉴其处理跨域的方式，或者寻找是否有适合Cocos Creator的集成方法。
注意事项
- 使用
*作为Access-Control-Allow-Origin的值会允许任何源的请求，这在生产环境中可能存在安全风险，建议仅在测试阶段采用，并在部署前替换为具体的源地址。 - 如果图片存储在阿里云OSS上，确保已在OSS控制台正确设置了跨域资源共享(CORS)规则，允许您的前端应用域名作为合法的请求源。
综上所述，解决跨域问题的关键在于确保图片服务器正确响应了CORS相关的HTTP头，或者通过代理绕过浏览器的同源策略限制。希望这些建议能帮助您解决问题。
