Access to XMLHttpRequest at 'localhost:3000/user/login' from origin '' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
上面这句话我应该都能倒背如流了,因为它困扰了我很久,经过各种搜索引擎我找到了很多的答案,但没有一种解决方法使用于我这次遇到的问题。仔细看这个错误提示的前半句,感觉像是跨域问题,因为我的浏览器端开的服务是3001端口,而服务端的服务是3000端口,那么这显然存在一个跨域问题,于是乎我利用express的cors中间件来解决这个问题,但是之后发现浏览器还是出现这个错误提示,所以现在可能有两个原因:- 上述利用cors解决跨域的方法不使用,改换成其他的跨域解决方法
- 这根本就不是跨域的问题
最后确认是原因二,于是我从网上找来各种解决方案:
- 原因:chorme浏览器为了安全性考虑,默认对跨域进行访问禁止
解决方案:给浏览器传入启动参数(--allow-file-access-from-files),允许跨域访问或者改用火狐浏览器
- 原因:因为没有在服务环境里运行含有ajax方法的页面,而是直接通过浏览器打开是不行的,即本地页面ajax请求本地页面,必须通过服务器环境运行 仔细看来这个问题,发现它其实是
XMLHttpRequest cannot load file:///Users/yzy/github/news-list/js/mock.json. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
所以跟我的问题是不一样的,另外我的webpack已经配置了开发服务器,所以这个方法不适用
最后解决方法:最后发现其实这就是一个跨域问题,仔细看看问题,ajax请求localhost:3000/user/login
没有表明protocol,其实将ajax请求写完整加上http即可解决问题http://localhost:3000/user/login
总结(血的教训):只要是协议、域名或者端口号有任何一个不同,都会被当做是不同的跨域,写ajax请求时url务必写完整或者提前配置好