前端跨域请求

作者: Addy_Zhou | 来源:发表于2015-11-15 22:41 被阅读334次

最近前端碰到请求跨域问题,同事xx和jim都提供了一个方案,蛮好用的,自己简单收集整理了下,介绍给大家。

1.cors
解决:post,get,以及cookie跨域
缺点:需要服务器端配合
参考:http://www.ituring.com.cn/article/200275

2.nginx反向代理
解决:post,get, 以及cookie跨域
优点:无需服务器端配合
参考:

(1)nginx配置
  server {
    listen       80;
    server_name  www.common.com;
    root D:\project\front-end-laban;  //项目根目录
    location / {
      proxy_set_header   Host             192.168.14.215; //服务器端ip
      if (!-f $request_filename) {  //如果不是请求文件,访问服务器
          proxy_pass      http://192.168.14.215; 
         }
      }
    }

(2)修改hosts文件
 127.0.0.1         www.common.com

说明:比如访问www.common.com/test.html页面,由于配置了host,会访问到本机的80端口,而80端口被nginx监听,即会被nginx拦截,nginx的配置策略是,访问文件就直接访问root目录下的文件,如果是接口之类的请求,则访问192.168.14.215服务器。这样就达到的跨域的目的。

3.jsonp
解决:get
缺点:不支持post请求
说明:jsonp就是使用了<script src=''>中src的目的地址可以跨域的特点的一项技术。它只能支持get请求就不要自明了。
参考:
http://www.cnblogs.com/yuzhongwusan/archive/2012/12/11/2812849.html

4.html5 postMessage
缺点:对浏览器版本有要求,ie8及以上才支持
参考:
http://lzw.me/a/html5-postmessage-post-cross-domain.html

5.window.name
参考:
http://lzw.me/a/html5-postmessage-post-cross-domain.html

6.anyProxy (Alibaba)

相关文章

  • 前端请求

    node 简单跨域 前端简单请求

  • axios发送跨域请求需要注意的问题

    在实际项目中前端使用到vue,后端使用php进行开发。前端使用axios请求请求。 关于跨域 跨域的概念这些就不说...

  • 跨域请求(CORS)要点

    前端开发的童鞋,应该都有听过跨域请求,但这其中的细节可能还不清楚,比如: 什么是跨域请求? 为什么会存在跨域请求?...

  • express 实现跨域

    在前端向后端发起请求时会出现跨域无法请求的问题,所谓跨域是指前端的资源请求与所请求的资源本身的服务器在不同域或不同...

  • django跨域配置

    前言——跨域请求 前端对Cross-Origin Resource Sharing 问题(CORS,中文又称'跨域...

  • 跨域实战解决方案

    一.跨域方案 1.JSONP跨域 (1)前端发起jQuery ajax 的get请求 $.getJSON...

  • [mark]九种跨域方式实现原理

    前端如何使用proxyTable和nginx解决跨域问题 前言 前后端数据交互经常会碰到请求跨域,什么是跨域,以及...

  • 新增-后端跨域

    前端程序 后端程序 现在请求无法,到达需要解决跨域问题 每个servlet单独做跨域设置 跨域过滤器

  • 实现跨域请求的八种方式

    前端开发中我们经常会遇到跨域请求的情况,处理跨域请求方式很多,特整理如下: 浏览器的同源策略 提到跨域不能不先说一...

  • Javascript跨域整理

    在前端的JS请求中,跨域的问题经常存在,根据不同的实现原理,常见的跨域的方法如下: 一:前端的方式 1:在前端页面...

网友评论

    本文标题:前端跨域请求

    本文链接:https://www.haomeiwen.com/subject/rrlkhttx.html