问题记录——跨域

Access to XMLHttpRequest at 'localhost:3000/user/login' from origin 'http://127.0.0.1:3001' 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中间件来解决这个问题，但是之后发现浏览器还是出现这个错误提示，所以现在可能有两个原因：

1. 上述利用cors解决跨域的方法不使用，改换成其他的跨域解决方法
2. 这根本就不是跨域的问题

最后确认是原因二，于是我从网上找来各种解决方案：

1. 原因：chorme浏览器为了安全性考虑，默认对跨域进行访问禁止

解决方案：给浏览器传入启动参数（--allow-file-access-from-files），允许跨域访问或者改用火狐浏览器

2. 原因：因为没有在服务环境里运行含有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务必写完整或者提前配置好