做为前端开发,你还在为解决跨域而烦恼吗?
跨域怎么产生就不在细说了,详看 浏览器的同源策略
这里我推荐这两种方式跨域,其它的跨域方式都还有不少但都不推荐,主流的也就这两种方式。
解决方案以下:html
开发环境 | 生产环境 | |
---|---|---|
方案一 | cors | cors |
方案二 | proxy | nginx |
cors
全称为 Cross Origin Resource Sharing(跨域资源共享)。这种方案对于前端来讲没有什么工做量,和正常发送请求写法上没有任何区别,工做量基本都在后端这里。每一次请求,浏览器必须先以 OPTIONS
请求方式发送一个预请求(也不是全部请求都会发送 options, cors),经过预检请求从而获知服务器端对跨源请求支持的 HTTP
方法。在确认服务器容许该跨源请求的状况下,再以实际的 HTTP
请求方法发送那个真正的请求。推荐的缘由是:只要第一次配好了,以后无论有多少接口和项目复用就能够了,一劳永逸的解决了跨域问题,并且无论是开发环境仍是正式环境都能方便的使用。详细 MDN 文档前端
但总有后端以为麻烦不想这么搞,那纯前端也是有解决方案的。webpack
在 dev
开发模式下能够下使用 webpack 的 proxy
使用也是很方便,参照 文档 就会使用了。但这种方法在生产环境是不能使用的。在生产环境中须要使用 nginx
进行反向代理。无论是 proxy
和 nginx
的原理都是同样的,经过搭建一个中转服务器来转发请求规避跨域的问题。nginx
proxy
进行代理便可webpack
之类的,最简单的就是禁用谷歌浏览器的安全策略
生产环境的话仍是比较推荐nginx
的git
好比后端地址为http://localhost:8089/mall_war/*.do
那么前端在代码里只须要访问/mall_war/*.do
就能够,默认发的是部署服务器的ip
来访问
而后再nginx
里配置以下github
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; } }
这里推荐第二种方式,开发线上都是很方便的,简单进行下配置便可实现了。web