前端如何解决服务器跨域
1. 前端跨域如何解决
什么是跨域？
跨域是通俗的说是从一个域名去请求另一个域名的资源。比如从 www..com 页面去请求 www.taobao.com 的资源。
跨域严格一点来说：两个域名只要协议，域名，端口中只要有册芦一个不同，就被成为跨域
浏览器为什么要限制跨域？
只有同域才可以拿到存在cookie中的信息，防止坏人随意拿到我们的信息去做坏事
在团队的配置中，我们为了减少前端对后端的依赖，提高开发效率，使前后端职责更清晰等等因素，我们不得不面伏姿让对跨域的问题，那我们该怎么解决呢？
1、 JSONP
原理：浏览器缺局对script的资源引用没有同源限制，同时资源加载到页面后会立即执行，所以通过动态插入script标签即可达到跨域的请求
特点：数据为json格式
缺点：不能post
2、 CORS
原理 ： cors(Cross-Origin Resource Sharing)是 W3C CORS 工作草案 ，它定义了在跨域访问资源时浏览器和服务器之间如何通信。CORS背后的基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方，从而决定请求或响应成功与否
特点 ：是 JSONP 模式的现代版。支持更多的请求方式，XMLHttpRequest
缺点：需后端配合修改，现代浏览器支持cors，老浏览器依旧要用JSONP
3、 PROXY
原理：proxy代理用于将请求拦截，然后通过服务器来发送请求，然后再将请求的结果传递给前端
node通常用 node-http-proxy 即可
proxy太通用了，weblack-dev-server里已集成，使用时直接配置即可 webpack-dev-server proxy代理
2. 前端解决跨域都有哪些方法
什么是跨域？
浏览器发送的请求地址（URL）与所在页面的地址 不同（端口/协议/域名 其一不同）。简言之，浏览器发出的请求url，与其所在页面的url不一样。此时，同源策略会让浏览器拒收 服务器响应回来的数据，报错信息如下：
最常用的四种跨域解决方案
1.cors
cors跨域资源共享允许是在服务端"Access-Control-Allow-Origin"字段设置的，当将cors设置为允许某个地址访问时，该地址就可以跨域访问这个服务器地址。当cors设置为"*"时即允许所有地址访问时，则表示所有地址都可以跨域访问这个服务器地址的资源。
2、 通过jsonp跨域
Jsonp是Json的一种“使用模式”，他就可以解决浏览器遇到的跨域问题，我们可以动态创建script，再请求一个带参网址实现跨域通信。用Jsonp请求得到的是JavaScript，相当于直接用JavaScript解析。
3、postMessage跨域
在h5中新增了postMessage方法，postMessage可以实现跨文档消息传输，我们可以通过Windows的message事件来监听发送跨文档消息传输内容。
4、proxy（代理）
原理：因为同源策略只是针对浏览器的安全策略，但是服务端并不受同源策略的限制，也就不存在跨域的问题。
3. 请求接口时跨域问题，前端解决方法
在前后端接口请求中，由于浏览器的限制，会出现跨域的情况。常用的跨域方案有：
1、JSONP跨域
2、Nginx反向代理
3、服务器端修改header
4、document.domain
5、window.name
6、postMessage
7、后台配置运行跨域
当一个请求url的 协议、域名、端口 三者之间任意一个与当前页面url不同即为跨域
特别注意两点：
1、如果是协议和端口造成的跨域问题“前台”是无能为力的，
2、在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
4. 前端跨域的几种解决方案
1.Cookie、LocalStorage和IndexDB无法读取
2.DOM和JS对象无法获取
3.Ajax请求不能发送
1.简单请求
2.非简单请求
1.请求方法是以下三种方法之一.
2.HTTP请求头必须是下面几种字段
对于简单请求就是浏览器直接发出CORS,具体来说就是请求头添加Origin字段
如果Origin指定的域名在许可范围内,服务器返回的响应，会多出几个头信息响应字段
1.Access-Control-Allow-Origin：必选
2.Access-Control-Allow-Credentials:可选
3.Access-Control-Expose-Headers
"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。
除了Origin字段，“预检”请求的头信息包括两个特殊字段。
1.Access-Control-Request-Method
2.Access-Control-Request-Headers
服务器收到“预检”请卖型求以后，检查蚂唤了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可中物猜以做出回应。
5. 如何解决前端跨域问题
可以使用服务器代理或者在后端设置允许跨域。
现在的项目一般是在后端设置允许跨域，前端在带有允许跨域的情况下，可以像没有跨域一样正常访问。
如果前端单独发布到服务器，也可以在服务器是设置代理，使用代理转发请求。