如何解决跨域问题

做为前端开发，你还在为解决跨域而烦恼吗？
跨域怎么产生就不在细说了，详看 浏览器的同源策略
这里我推荐这两种方式跨域，其它的跨域方式都还有不少但都不推荐，主流的也就这两种方式。

解决方案以下：

	开发环境	生产环境
方案一	cors	cors
方案二	proxy	nginx

方案一：cors~

cors 全称为 Cross Origin Resource Sharing（跨域资源共享）。这种方案对于前端来讲没有什么工做量，和正常发送请求写法上没有任何区别，工做量基本都在后端这里。每一次请求，浏览器必须先以 OPTIONS 请求方式发送一个预请求（也不是全部请求都会发送 options， cors），经过预检请求从而获知服务器端对跨源请求支持的 HTTP 方法。在确认服务器容许该跨源请求的状况下，再以实际的 HTTP 请求方法发送那个真正的请求。推荐的缘由是：只要第一次配好了，以后无论有多少接口和项目复用就能够了，一劳永逸的解决了跨域问题，并且无论是开发环境仍是正式环境都能方便的使用。详细 MDN 文档

但总有后端以为麻烦不想这么搞，那纯前端也是有解决方案的。

方案二：proxy+nginx

在 dev 开发模式下能够下使用 webpack 的 proxy 使用也是很方便，参照 文档 就会使用了。但这种方法在生产环境是不能使用的。在生产环境中须要使用 nginx 进行反向代理。无论是 proxy 和 nginx 的原理都是同样的，经过搭建一个中转服务器来转发请求规避跨域的问题。

开发环境

• 本地开发的话若是你是框架之类的，直接使用proxy进行代理便可
• 若是没有使用框架以及webpack之类的，最简单的就是禁用谷歌浏览器的安全策略

生产环境

生产环境的话仍是比较推荐nginx的

• nginx

好比后端地址为http://localhost:8089/mall_war/*.do
那么前端在代码里只须要访问/mall_war/*.do就能够，默认发的是部署服务器的ip来访问
而后再nginx里配置以下

server {
    listen       8066;
    server_name  commonFronted;
    # 项目静态资源目录
    location / {
        alias     /xxx/dist;
        index     index.html;
    }

    location ^~/mall_war/ {
        proxy_pass http://localhost:8089/mall_war/;
        proxy_set_header  Host $host;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-Proto https;
        proxy_set_header  X-NginX-Proxy true;
        proxy_buffers 256 4k;
        proxy_max_temp_file_size 0k;
        proxy_connect_timeout 30;
        proxy_send_timeout 60;
        proxy_read_timeout 60;
        proxy_next_upstream error timeout invalid_header http_502;            
    }
}

这里推荐第二种方式，开发线上都是很方便的，简单进行下配置便可实现了。