跨域怎么解决

JavaScript09

跨域怎么解决,第1张

问题一:如何解决跨域问题 特别注意两点:

第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,

第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

“URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。

2. 前端解决跨域问题

1>document.domain + iframe (只有在主域相同的时候才能使用该方法)

1) 在a/a中:

复制代码

document.domain = 'a'

var ifr = document.createElement('iframe')

ifr.src = 'script.a/b'

ifr.display = none

document.body.appendChild(ifr)

ifr.onload = function(){

var doc = ifr.contentDocument || ifr.contentWindow.document

在这里操作doc,也就是b

ifr.onload = null

}

复制代码

2) 在script.a/b中:

document.domain = 'a'

2>动态创建script

这个没什么好说的,因为script标签不受同源策略的限制。

复制代码

function loadScript(url, func) {

var head = document.head || document.getElementByTagName('head')[0]

var script = document.createElement('script')

script.src = url

script.onload = script.onreadystatechange = function(){

if(!this.readyState || this.readyState=='loaded' || this.readyState=='plete'){

func()

script.onload = script.onreadystatechange = null

}

}

head.insertBefore(script......>>

问题二:如何解决跨域问题 由 于此前很少写前端的代码(哈哈,不合格的程序员啊),最近项目中用到json作为系统间交互的手段,自然就伴随着众多ajax请求,随之而来的就是要解决 ajax的跨域问题。本篇将讲述一个小白从遇到跨域不知道是跨域问题,到知道是跨域问题不知道如何解决,再到解决跨域问题,最后找到两种方法解决ajax 跨域问题的全过程。

不知是跨域问题

起 因是这样的,为了复用,减少重复开发,单独开发了一个用户权限管理系统,共其他系统获取认证与授权信息,暂且称之为A系统;调用A系统以B为例。在B系统 中用ajax调用A系统系统的接口(数据格式为json),当时特别困惑,在A系统中访问相应的url可正常回返json数据,但是在B系统中使用 ajax请求同样的url则一点儿反应都没有,好像什么都没有发生一样。这样反反复复改来改去好久都没能解决,于是求救同事,提醒可能是ajax跨域问 题,于是就将这个问题当做跨域问题来解决了。

知跨域而不知如何解决

知道问题的确切原因,剩下的就是找到解决问题的方法了。google了好久,再次在同事的指点下知道jQuery的ajax有jsonp这样的属性可以用来解决跨域的问题。

找到一种解决方式

现在也知道了怎样来解决跨域问题,余下的就是实现的细节了。实现的过程中错误还是避免不了的。由于不了解json和jsonp两种格式的区别,也犯了错误,google了好久才解决。

首先来看看在页面中如何使用jQuery的ajax解决跨域问题的简单版:

复制代码

$(document).ready(function(){

var url='localhost:8080/...upById

+?id=1&callback=?'

$.ajax({

url:url,

dataType:'jsonp',

processData: false,

type:'get',

success:function(data){

alert(data.name)

},

error:function(XMLHttpRequest, textStatus, errorThrown) {

alert(XMLHttpRequest.status)

alert(XMLHttpRequest.readyState)

alert(textStatus)

}})

})

复制代码

这样写是完全没有问题的,起先error的处理函数中仅仅是alert(“error”),为了进一步弄清楚是什么原因造成了错误,故将处理函数变 为上面的实现方式。最后一行alert使用为;parsererror。百思不得其解,继续google,最终还是在万能的stackoverflow找 到了答案,链接在这里。原因是jsonp的格式与json格式有着细微的差别,所以在server端的代码上稍稍有所不同。

比较一下json与jsonp格式的区别:

json格式:

{

message&q......>>

问题三:跨域是指什么,因为什么引起的?有哪些解决方案?web前端知识 跨域是指 不同域名之间相互访问 例如 我的电脑上有2个服务器 192.168.0.11 192.168.0.12 如果第一个服务器上的页面要访问第二个服务器 就叫做跨域 或者baidu 要访问xxx 也是不同域名 也是跨域

HTML5 里有个window.postMessage 方法,支持跨域访问,详情可以参考

webhek/window-postmessage-api

如果你的程序在服务器上,也可以进行相应的操作来完成跨域访问

纯手打 有问题欢迎咨询

问题四:如何解决跨域问题 打开IE浏览器,在工具菜单下选择Internet选项,打开Internet选项卡

切换到安全选项卡下,点击可信站点,然后单击站点按钮

可信站点窗口输入网址到可信站点的区域,点击添加按钮,网址则会添加到网站列表下,最后关闭可信站点窗口

还是在安全选项卡下的可信站点,点击自定义级别

打开受信任的站点区域窗口,找到跨域浏览窗口和框架选择启用

在当前窗口中继续往下翻,通过域访问数据源也选择启用,点击确定关闭受信任的站点区域窗口

在Internet窗口也点击确定按钮,同时关闭浏览器

在请求的js脚本中添加是否允许跨域访问的权限,jQuery.support.cors默认值为true,则代表允许;反之,不允许。设置完成,重新打开浏览器验证即可

问题五:$跨域请求怎么解决 post请求进行跨域

angularjs内置封装了类ajax的网络服务$,所以实现了依赖外部插件来完成完整的前后端分离方案

$scope.main = {

getData: function () {

$({

method: 'POST',

url: 'localhost:8000',

headers: {

'Content-Type' : 'application/x--form-urlencoded'

},

data: {

myUrl: 'c.m.163/...0'

}

}).then(function success(result) {

数据请求成功

console.log(result.data)

},function error(err) {

数据请求失败

console.log(err)

})

}

}

注意:表面上是向$中传入了一个回调函数提供相应时调用,实际是返回了一个promise对象,angular1.2以上的版本对$进行了优化

优化后:

$scope.main = {

getData: function () {

var myUrl = 'c.m.163/...0'

var url = 'localhost:8000'

var promise = $({

method: 'POST',

url: url,

headers: {

'Content-Type' : 'text/plain'

......>>

问题六:如何解决跨域问题 关于跨域名问题还是问题么,这方面的解决实践非常多,今天我就旧话重提把我所知道的通过几个应用场景来分别总结一下(转帖请注明出处:blog.csdn/lenel)

先说明一点:我说的某某域名在您的控制下的意思是这个域名下的网页由您来负责开发内部的JavaScript

场景一:将bbs.xxx的页面用iframe嵌入到xxx的中,如何在iframe内外使用js通信(转帖请注明出处:blog.csdn/lenel)

一级域名都是xxx 这个域名一定是在您的控制下,所以你只要在两个页面中同时升级域名即可

在父窗口和iframe内部分别加上js语句:document.domain=xxx

之后2个页面就等于在同一域名下,通过window.parent oIframe.contentDocument就可以相互访问,进行无障碍的JS通信

在新浪、淘宝等很多页面都能找到这样的语句。不过document.domain不可以随便指定,只能向上升级,从bbs.xxx升级到yyy肯定会出错

场景二:将yyy的页面用iframe嵌入到xxx的中,两个域名都在您的控制下,如何在iframe内外进行一定的数据交流(转帖请注明出处:blog.csdn/lenel)

你可以通过相互改变hash值的方式来进行一些数据的通信

这里的实现基于如下技术要点:

1、父窗口通过改变子窗口的src中的hash值把一部分信息传入,如果src只有hash部分改变,那么子窗口是不会重新载入的。

2、

子窗口可以重写父窗口的location.href,但是注意这里子窗口无法读取而只能重写location.href所以要求前提是您控制两个域名,知

道当前父窗口的location.href是什么并写在子窗口内,这样通过parent.location.href =

已知的父窗口的href+#+hash。这样父窗口只有hash改变也不会重载。

3、上面两步分别做到了两个窗口之间的无刷新数据通知,

那么下面的来说如何感知数据变化。标准中没有相关规定,所以当前的任意浏览器遇到location.hash变化都不会触发任何javaScript事

......>>

问题七:如何解决javascript的跨域问题 一般是用iframe设置

document.domain = 'a'var ifr = document.createElement('iframe')ifr.src = 'a/index'ifr.style.display = 'none'document.body.appendChild(ifr)ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.documentconsole.log(doc.documentElement.innetHTML)}然后HTML5新特性有 ,postMessage

function Init () { if (window.addEventListener) { all browsers except IE before version 9 window.addEventListener (message, OnMessage, false)} else { if (window.attachEvent) { IE before version 9 window.attachEvent(onmessage, OnMessage)} } } function GetState () { var frame = document.getElementById (myFrame)var message = getstate参数if (frame.contentWindow.postMessage) { 传递的参数,后面是传递的你的跨域域名frame.contentWindow.postMessage (message, *)} } function OnMessage (event) { console.log(event.data)} document.body.onload=function(){Init()GetState()}

问题八:如何解决跨域问题 VPN或者域名

问题九:如何解决请求跨域的问题 jsonp 是写 script 标签,只能满足 get 请求。跨域 post 的话,IE8 及以上和其他主流浏览器可以用 window.postMessage 来实现,也就是传说中的 HTML5 方法了,可以看下标准,代码很简单。IE6、7 就用老式的方法

问题十:怎么解决服务器间的跨域问题 服务端的解决方案的基本原理就是,由客户端将请求发给本域服务器,再由本域服务器的代理来请求数据并将响应返回给客户端。

最常用的服务器解决方案就是利用web服务器本身提供的proxy功能,如apache和ligd的mod_proxy模块。在百度内 部,tran *** it的分流功能也可以解决部分跨域问题。但这些方法都有一定的局限性,鉴于安全性等问题的考虑,space这边最后开发了一个专门用于处

理跨域请求代理服务的spproxy模块,用于彻底解决js跨域问题。

下面我们将以空间的开放平台为例,简单介绍下如何通过apache的mod_proxy、tran *** it的分流以及space的spproxy模块来解

决该跨域问题,并简单介绍下spproxy的一些特性、缺点及下一步的改进计划。

空间在展现每个UWA开放模块之前都必须请求该模块的xml源代码以进行解析,每个模块的源代码文件都是存放在act域下的/ow/uwa目录下,那么在

用户空间首页(hi域)中请求该xml文件时就会存在js跨域问题。要解决该问题,只能让js向hi域的web服务器请求xml文件,而hi域web服务

器则通过一定的代理机制(如mod_proxy、tran *** it分流、spproxy)向act域的web服务器请求文件

一、在前端开发过程中,如果准备开发富应用,跨域的问题将会随之而来。

        我们先看看什么是跨域呢:

         所谓跨域,或者异源,是指主机名(域名)、协议、端口号只要有其一不同,就为不同的域(或源) 。出于保护用户数据的目的,浏览器有一个最基本的策略就是同源策略,只允许页面内的脚本访问当前域的资源(加载脚本、资源等不受此限制)。

二、如果浏览器厂商不对跨域请求进行处理,会给我们带来什么危害呢?

        有心人士(病毒制造者)会利用这个漏洞进行如下攻击:

        1. CSRF/XSRF 攻击 ,简单的来讲就是在 b.com 页面中请求 a.com 的接口(浏览器会自动带上 用户在 a.com 的 cookie),从而获取用户的在 a.com 的相关信息。

        2. XSS 注入攻击 ,类似于 SQL 攻击,提交含有恶意脚本的数据到服务器,从而达到破坏页面或者获取用户的 cookie。

三、我们了解到了什么是跨域,那我们又应该如何解决呢,现在找到了这些比较权威的文章,大家先品读一下:

        1. mozilla 官方网站关于跨域的文章(Cross Origin), HTTP访问控制(CORS)

        2. mozilla 官方网站关于浏览器同源策略的简要介绍(Same Origin),  浏览器的同源策略

四、读完这些文章,你打算怎么处理跨域问题呢,我先谈谈自己关于跨域的解决方案:

        1. 采用 CORS 协议,直接在 Nginx 中设置允许跨域的 header(也可以在后端的应用程序内设置,不过在 Nginx 入口配置的话更加统一),在 location 配置中直接使用指令 add_header( 官方文档链接 ),示例配置如下:

        2. 使用 JSONP,也是需要后端配合,利用“浏览器加载脚本、资源时不受同源策略的约束”这个特性,但是这种方式非常受限制,例如只能使用 GET 请求,不能携带自定义 header 等。

        3. 其他的一些方法,例如 window.name, document.domain 以及 HTML5 中的特性 window.postMessage 等

五、其他参考链接

        1.  浅谈JS跨域问题

        2. 跨域资源共享 CORS 详解----阮一峰

六、声明

        现在网络上的知识非常复杂,有些是摘自权威书籍的,有些是作者自己理解然后记录下来的,有些是瞎掰的,所以一定要结合情况多多甄别,对于有权威文档的知识点,建议先参考文档。