作者：颜亦浠@毛豆前端
本地开发过程中，最常遇到的就是出现跨域，无法请求的问题。如何解决在开发中遇到的跨域问题，今天整理了4种解决方法，供大家参考。
一、何为跨域
跨域出于浏览器的同源策略的限制，浏览器本身会限制跨域请求（严格来说，只是限制跨域的读操作）。那么何为跨域呢?非同源请求均为跨域，即:如果两个请求的协议、域名、端口号只要有一个不同，即为非同源即为跨域。
二、常见解决跨域方案
一般多用于本地自测或者前后端开发部署均为分离的情况
1、webpack的proxyTable方案
在一般项目中都会有webpack对应的开发环境的配置文件：webpack.dev.js，在配置项中加入ProxyTable的配置项即可：
proxy: {
'/api': {
changeOrigin: true,
target: 'http://******.*****.com',
}
}
如果前后端前缀不匹配或者后端前缀不统一的情况，可以增加pathRewrite属性来统一：
proxy: {
'/EntryApp': {
changeOrigin: true,
target: 'http://******.*******.com',
pathRewrite: {"^/EntryApp": "/EntryApp"}
},
}
proxyTable实现跨域可能存在的问题：
1.cookie丢失,接口无法访问
2.post请求报403错
2、Switchhosts工具
SwitchHosts是一个管理、快速切换Hosts小工具，软件开源，可以实现一键切换Hosts配置。SwitchHosts需要管理本机的ip和端口的映射，所以需要以管理员身份运行。
打开SwitchHosts之后,需要在Myhost当中配置对应的映射，当左手边处于打开状态的时候，文件是处于只读的状态,需要编辑的话,就需要让文件处于关闭状态，不同环境还可以分文件配置，直接照下图配置即可：
SwitchHosts使用中可能会遇到的问题：
1.端口号默认为80，如果不是，需要配置上对应的端口号
2.浏览器会有先考虑代理工具的代理。
3、Uuaper
uuaper是百度提供的一款基于nodejs，用于解决前端跨域问题的工具。具体的安装与配置可以去npm官网查找Uuaper,使用中需要结合nodejs，并需要具有自动认证功能：
var express = require('express');
var app = express();
var uuaper = require('uuaper');
app.use('/api', new uuaper({
target: 'http://xxx.xxx.com/',
debug: true,
auth: {
server: 'http://xxx.baidu.com/login?',
username: 'xxx',
password: 'xxx',
}
}));
4、Nginx
Nginx是一个免费的，开源的高性能的HTTP和反向代理服务器。
通常，线上前后端分开部署时，用nginx比较多。
nginx.conf是主配置文件，有若干个部分组成，每一部分都用{}区分。主要包括:
- main：nginx的全局配置，对全局生效
- events：影响nginx服务器或与用户的网络连接
- http：可以嵌套多个server,配置代理，缓存，日志等
- server：配置虚拟主机的相关参数，一个http可以有多个server
- nginx解决跨域的基本方法是在sever中配置proxy_pass:
// 前端服务的域名为 fe.**.com // 后端服务的域名为 dev.**.com server { listen: 80, server_name: fe.**.com, location / { proxy_pass dev.**.com } }根据实际需求，还可以添加一些其他的指令，比如：
- proxy_connect_timeout：nginx从接受请求至连接到上游服务器的最长等待时间
- proxy_cookie_domain：替代上游服务器的set_cookie头的domain属性
- proxy_cookie_path：替代上游服务器的set_cookie头的path
- proxy_set_header：重写发送到上游服务器头的内容，也可以通过将某个头部的值设置为空字符串，而不发送某个头部的方式发放实现
