作为前端开发，你还在为解决跨域而懊恼吗？
跨域怎么产生就不在细说了，详看浏览器的同源策略
这里我举荐这两种形式跨域，其它的跨域形式都还有很多但都不举荐，支流的也就这两种形式。

解决方案如下：

计划一：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;            
    }
}

这里举荐第二种形式，开发线上都是很不便的，简略进行下配置即可实现了。