服务器端处理跨域请求的最简解决方案

最近在写一个vue-cli搭建的博客，本地测试的时候vue-cli是跑在node.js上的，而数据要从apache得到，由于node.js监听8080，apache监听80，端口不一致，导致出现跨域请求，浏览器报错:

XMLHttpRequest cannot load http://XXXXXXXXX. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http: ' is therefore not allowed access.

---

跨域请求的问题困扰了一下午，到处查资料后找到了最简单的解决方案，其实跨域请求解决起来很简单。

最常用的两种方法：jsonp和CORS

• jsonp唯一的优点是支持某些上古浏览器（听说还有人用TMD-------IE5.0，6.0），具体原理和用法可以参照文章——jsonp原理详解——终于搞清楚jsonp是啥了，写的非常详细。

• CORS是W3C制定的跨域请求的规范，非常强大，但是某些上古浏览器不支持，具体原理请查看文章——Access-Control-Allow- 设置 跨域资源共享 CORS 详解

真的感谢上面两篇博文的博主，虽然后面才找到，但是真的非常详细。

编程哲理——从原理出发，才能无视语法。

---

跨域请求的定义就是——>服务器A从服务器B获取资源——>违反浏览器同源策略的请求——>非同源请求

A和B的IP从以下三点违反任意一点就是跨域请求：

1. 域名不同

2. 协议不同

3. 端口不同

URL格式——协议名://域名:端口/资源，端口80一般省略不写，因为默认80端口就是Web专用。

当这三个任意一个不同都会违反同源策略。

---

我的解决方案：

设置服务器的ResponseHeader，关于为什么，上述第二篇博文介绍的很清楚，我的服务器是PHP写的，所以直接php文件头部插入

问题解决，就这么简单，个人应用本地调试这么干一点问题没有，如果是实际项目可以具体声明允许那些源、请求方法等等。

其他语言写的服务器请百度——xxx语言设置响应头的方法。

其中重点是第四条，这条是用来告诉浏览器允许那些参数字段发送过来，POST带参数的请求必须加上这条，否则浏览器发送请求时不会带上参数。

---

另外vue-cli使用axios发送post带参数请求时一定要设置axios的ContentType属性为application/x-www-form-urlencoded，而且参数要用qs模块封装。