前端XMLHttpRequest跨域问题

c# webapi 用于上传文件。并在iis上配置允许跨域访问。之后使用微信小程序可以正常调用,也实现了文件的上传功能。但是在另一个网站中使用XMLHttpRequest无法上传,提示跨域错误,不过同一个网站可以使用,jq的ajax访问同一个服务器上的其它api。感觉就像只用XMLHttpRequest不可以。

测试你这个接口已经添加了access-control-allow-origin: *响应头可以正常上传,如下图所示调试工具修改问答dom元素添加file,onchange自动上传已经成功

img

access-control-allow-origin: * 已正常添加
img

小程序wx.request没有跨域问题,不需要添加响应头,添加也无妨,但是必须要在小程序管理后台添加服务器配置中设置请求的合法域名

img

有帮助麻烦点个采纳【本回答右上角】,谢谢~~

都知道是跨域问题了,那就要允许可以跨域呀,不允许快递当然要报错了,除了前端js允许跨域以外,后端的api那里也要允许跨域,否则你也是无法跨域

参考
JavaScript中XMLHttpRequest实现跨域访问 - 洪雁君 - 博客园 JavaScript的跨域访问方法有很多,不下十种。本文总结的是XMLHttpRequest的跨域访问。在JavaScript中,我们可以用XMLHttpRequest访问服务端应用。但是浏览器对这类 https://www.cnblogs.com/hongyanee/p/3185213.html

处理好了,还是服务器的问题
XMLHttpRequest在请求时,先要发送OPTIONS方法。
在webapi项目Global.asax中增加如下方法

        public void Application_BeginRequest()
        {
            //OPTIONS请求方法的主要作用:
            //1、获取服务器支持的HTTP方法;也就是黑客经常用的方法。
            //2、用来检查服务器的性能。如Ajax进行跨域请求是的预检,需要想另外一个域名的资源发送OPTIONS请求头,用以判断发送的请求是否安全
            /*
            if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
            {
                //表示对输出的内容进行缓冲,执行page.Response.Flush()时,会等所有内容缓冲完毕,将内容发送到客户端
                //这样就不会出错,造成页面卡死状态,让用户无限制等下去
                //Response.StatusCode = 200;
                //Response.End();
                Response.Flush();
            }
            */
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Cache-Control", "no-cache");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                HttpContext.Current.Response.End();
            }
        }