中國式情調
中國式情調

浅谈跨域问题的出现及其解决方案

项目源码：https://github.com/trp1119/cross-domain

1 跨域问题的出现

1.1 什么是同源策略

同源策略（Same origin policy）是浏览器最核心也最基础的安全功能，同源策略会阻止一个域的 javascript 脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。[1]

1.2 什么是跨域请求（非同源策略请求）

跨域请求，即非同源策略请求，指当前发起请求的域与该请求指向的资源所在的域不一致。[1]

当前页面url 被请求页面url 是否跨域 原因
http://www.test.com http://www.test.com/index.html 否 同源（协议、域名、端口号相同）
http://www.test.com/ https://www.test.com/index.html 跨域 协议不同（http/https）
http://www.test.com/ http://www.baidu.com/ 跨域 主域名不同（test/baidu）
http://www.test.com/ http://blog.test.com/ 跨域 子域名不同（www/blog）
http://www.test.com:8080/ http://www.test.com:7001/ 跨域 端口号不同（8080/7001）

1.3 跨域请求发生场景

  • 在现代前端开发中，我们经常需要调用第三方的服务接口（例如 mock server、fake api），随着专业化分工的出现有很多专业的信息服务提供商为前端开发者提供各类接口，这种情况下就需要进行跨域请求。
  • 在前后端分离的项目中，前端后端分属于不同的服务跨域问题在采用这种架构的时候就存在，而且现在很多项目都采用这种前后分离的方式。

1.4 同源策略带来的跨域请求限制

  • 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
  • 无法接触非同源网页的 DOM
  • 无法向非同源地址发送 AJAX 请求 [1]

举例

数据服务器（server_database）配置（5000 端口）

/**
 * 数据服务器
 */

let express = require('express'),
    app = express()

app.listen(5000, () => {
  console.log('数据服务器启动成功，运行在5000端口')
})

app.get('/queryInfo', (req, res) => {
  let data = {
    code: 0,
    msg: '非同源数据!'
  }
  res.send(data)
})

客户端（静态资源）服务器（server_static）配置（8000 端口）

/**
 * 客户端（静态资源）服务器
 */

let express = require('express'),
    app = express()

app.listen(8000, () => {
  console.log('客户端（静态资源）服务器启动成功，运行在8000端口')
})

app.get('/queryInfo', (req, res) => {
  res.send({
    code: 0,
    msg: '同源数据!'
  })
})

app.use(express.static('./static'))

客户端数据请求

客户端数据请求结果

1.4-1.png

同源请求下，得到服务器返回数据

{"code":0,"msg":"同源数据!"}

非同源请求（跨域请求）下，浏览器报错

Failed to load http://localhost:5000/queryInfo: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

tips：在未经允许的情况下，浏览器禁止 js 读取另一个域名的内容。但浏览器并不阻止向另一个域名发送请求。

跨域请求（非同源策略请求）限制为浏览器限制，非服务器限制。无论是否是跨域请求，服务器均会返回数据。

1.4-2.png
1.4-3.png

2 为什么会有跨域限制

  • 保护cookie、LocalStorage 和 IndexedDB

    cookie 中存着 sessionID（登录凭证）。当用户访问恶意网站时，如果没有同源策略，那么这个网站就可以通过 js 访问 document.cookie 得到用户关于各个网站的 sessionID，如果这个 sessionID 在有效期内，恶意网站就可以利用 sessionID登录各个网站，获取用户其他信息。 [2]

  • 保护DOM操作

    恶意网站通过 iframe 加载支付宝页面，当用户进入恶意网站后，误以为是支付宝官方页面，输入用户名、密码等信息。如果没有同源策略，恶意网站就可以通过 DOM操作 获取到用户输入值，从而控制用户账户。 [2]

  • 限制 ajax操作

    cookie 工作机制

    1. 客户向 A 网站的服务器发送登录请求，并携带账号密码数据

    2. A 网站的服务器校验账号密码正确后，返回响应并给本地添加了cookie

    3. 之后客户再次向 A 网站发起请求会自动带上A网站存储在本地的cookie

    4. A 网站的服务器从cookie中获取账号密码数据后，返回登陆成功界面

    浅谈跨域问题的出现及其解决方案_第1张图片
    2-1.png

用户登录过支付宝后，支付宝在本地设置了 cookie 信息。如果没有同源策略，当用户访问恶意网站时，恶意网站利用存储在本地的 cookie 等信息通过 ajax 向支付宝发起登录请求，从 ajax 回调中解析到用户数据信息。[3]

3 八种跨域解决方案

3.1 JSONP

3.1.1 JSONP 可用前提

浏览器安全性和方便性是成反比的，十位数的密码提高了安全性，但是不方便记忆。同样，同源策略提升了 Web 前端的安全性，但牺牲了Web拓展上的灵活性。

设想若把 html、js、css、flash，image 等文件全部布置在一台服务器上，小型网站这样还可以，大中型网站如果这样做服务器无法承受。为解决服务器冗余，在实型前后端分离，静态资源服务器、图片资源服务器、视频资源服务器等拆分后，虽然系统变的更加灵活，但受制于浏览器同源策略限制，不同服务器之间通信受到限制。虽然保证了安全，Web 方便性大打折扣。

所以，现代浏览器在安全性和可用性之间选择了一个平衡点。在遵循同源策略的基础上，选择性地为同源策略“开放了后门”。 例如 script、 img、link、iframe 等标签，都允许垮域引用资源，严格说这都是不符合同源要求的。（当然，用户只能是引用这些资源而已，并不能读取这些资源的内容。例如在自己域内可以读取百度 logo 图片，但无法读取到该数据的二进制资源。）[4]

利用浏览器允许 script 标签跨域引用资源的特性，形成了一种非正式传输协议，JSONP。

3.1.2 一般 JSONP 使用方法及其实现原理

JSONP（ JSON with Padding ），一种非官方跨域数据交互协议。在使用时，用户传递一个 callback 参数给服务端，然后服务端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据，这样客户端就可以随意定制自己的函数来自动处理返回数据。[5]

3.1.2.1 JSONP 的使用

JSONP 客户端调用方法

JSONP 服务器配置

/**
 * 数据资源服务器
 */

let express = require('express'),
    app = express()

app.listen(5000, () => {
  console.log('数据服务器启动成功，运行在5000端口')
})

app.get('/queryInfo', (req, res) => {
  let data = {
    code: 0,
    msg: '非同源数据!'
  }
  // JSONP 跨域数据返回
  let fn = req.query.callback // 获取客户端传递的函数名，注意，此处 callback 要与前端协商设置
  res.send(`${fn}(${data})`) // 返回指定格式的内容，函数名(数据) 这种格式
})

返回数据

3.1.2.1-1.png
3.1.2.2 JSONP 实现跨域请求原理
浅谈跨域问题的出现及其解决方案_第2张图片
3.1.2.2-1.png

注意：客户端定义的必须是全局函数，因为浏览器中收到服务器返回的函数执行只有在全局函数下才能运行。

3.1.2.2-2.png
3.1.3 ajax 下使用 JSONP及其原理

JSONP 是非官方跨域数据交互协议，但 ajax 对其进行了封装，可采用 ajax 发起 jsonp 跨域请求。（axios 无 jsonp 请求方式）

3.1.3.1 使用 ajax 进行 JSONP 跨域请求

JSONP 客户端调用方法

接口调用

3.1.3.1-1.png
3.1.3.1-2.png

返回数据

3.1.3.1-3.png
3.1.3.2 ajax 实现 JSONP 跨域请求原理

ajax 对 JSONP 的封装依然才用的是 JSONP 实现原理，即通过动态创建 script 标签，然后拼装数据后发起请求。具体实现可参考 3.1.4 封装一个简单的 JSONP 实现返回 Promise。

3.1.4 封装一个简单的 JSONP 实现返回 Promise

JSONP 封装

;(function anonymous(window) {
  /**
   * JSONP 方法
   * url 请求的接口地址
   * options 配置项
   *    jsonp: 'callback'（默认值）
   *    jsonpCallback: 随机生成的全局函数/自定义全局函数名
   *    timeout: 3000（默认值）
   */
  let jsonp = function (url, options = {}) {
    // 返回 Promise
    return new Promise((resolve, reject) => {
      // 验证参数合法性
      if (typeof url === 'undefined') {
        reject('url必须传递！')
        return
      }
      // 发送 jsonp 请求
      let SCRIPT = document.createElement('script'),
          CALL_BACK = options.jsonp || 'callback',
          FN_NAME = options.jsonpCallback || `JSONP${new Date().getTime()}`,

      SCRIPT.src = `${url}${url.indexOf('?') >= 0 ? '&' : '?'}${CALL_BACK}=${FN_NAME}&_${new Date().getTime()}`
      document.body.appendChild(SCRIPT)

      // 成功或失败后执行的函数
      window[FN_NAME] = function (result) {
        document.body.removeChild(SCRIPT)
        window[FN_NAME] = null
        resolve(result)
      }
    })
  }
  if (typeof module !== 'undefined' && module.exports !== 'undefined') {
    module.exports = {
      jsonp
    }
  }
  window.jsonp = jsonp

})(typeof window === 'undefined' ? global : window)
// 判断正在不同的环境下去，让 window 代表不同的全局对象，浏览器环境下就是 window，node 环境下执行代码就是 global

使用自行封装的 JSONP 发起跨域请求

接口调用

3.1.4-1.png
浅谈跨域问题的出现及其解决方案_第3张图片
3.1.4-2.png

返回数据

3.1.4-3.png
3.1.5 JSONP 不足
  • JSONP 由于采用 script 资源文件请求，而资源请求为 GET 请求，故仅在 GET 请求中使用 JSONP 跨域请求。
  • 使用 ajax 请求网站，而服务器返回的 JSONP callback 是恶意执行代码，导致返回浏览器后会自动执行恶意代码，威胁数据安全。（XSS 攻击）

3.2 CORS 跨域资源共享

CORS (Cross-Origin Resource Sharing)，跨域资源共享

CORS 需要浏览器和服务器同时支持，才可以实现跨域请求，目前几乎所有浏览器都支持 CORS，IE 则不能低于 IE10。CORS 的整个过程都由浏览器自动完成，前端无需做任何设置，跟平时发送 ajax 请求并无差异。所以，实现 CORS 的关键在于服务器，只要服务器实现 CORS 接口，就可以实现跨域通信。[6]

3.2.1 CORS 跨域配置方式

服务器未配置时限制跨域

3.2.1-1.png

由图中可以看出，浏览器不允许跨域原因已指出，No “Access-Control-Allow-Origin” header，故可在服务端进行相关头部信息配置以实现跨域请求。6

客户端发送请求

服务端配置

/**
 * 数据资源服务器
 */

let express = require('express'),
    app = express()

app.listen(5000, () => {
  console.log('数据服务器启动成功，运行在5000端口')
})

// 基于CORS设置允许跨域请求
app.use((req, res, next) => {
  // 允许哪些源可以向这个服务器发送AJAX请求（通配符是 '*'，表示允许所有的源，也可以单独设置某个源，'http://localhost:8000'，这样只允许 http://localhost:8000 的请求）
  // 不使用通配符是为了保证接口和数据的安全，不能让所有的源都能访问。而且一旦设置了允许携带凭证过来，则设置 '*' 通配符会被报错，此时只能设置具体的源！且只能设置一个允许访问的源。
  res.header('Access-Control-Allow-Origin', '*')
  // 是否允许跨域的时候携带凭证（例如 cookie 凭证，true 为允许，false 为不允许，设置为 false，客户端和服务器之间不会传递 cookie，这样 session 存储就失效了）（session 之所以有用是因为客户端从 cookie 中取 sid ，即将sid通过 cookie 传递给服务器进行校验）
  // 一般都设置为 true
  res.header('Access-Control-Allow-Credentials', true)
  // 允许的请求头部（哪些头部信息是合法的）
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-Width, Cookie')
  // 允许的请求方式（一定要有 OPTIONS）
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, HEAD, OPTIONS')
  // 设置 OPTIONS 请求目的：我们吧这个请求当做一个试探性请求，当客户端需要向服务器发送请求的时候，首先发送一个 OPTIONS 请求，服务器接受到是 OPTIONS 请求，看一下是否允许跨域，允许返回成功。如果服务器不允许跨域，则客户端会出现跨域请求不允许的错误。如果客户端检测到不允许跨域，则后续的请求都不再进行。 =》 客户端 axios 框架就是这样处理的，自己写的没有写 OPTIONS 请求。
  req.method === 'OPTIONS' ? res.send('CURRENT SERVICES SUPPORT CROSS DOMAIN REQUESTS!') : next()
  // next() 为 express 中间件语法
  next()
})

app.get('/queryInfo', (req, res) => {
  let data = {
    code: 0,
    msg: '非同源数据!'
  }
  // CORS 跨域数据返回
  res.send(data)
})

接口调用

浅谈跨域问题的出现及其解决方案_第4张图片
3.2.1-2.png

返回数据

浅谈跨域问题的出现及其解决方案_第5张图片
3.2.1-3.png
3.2.2 CORS 跨域配置介绍
3.2.2.1 Access-Control-Allow-Origin
res.header('Access-Control-Allow-Origin', '*')

res.header('Access-Control-Allow-Origin', 'http://localhost:8000')

允许哪些源可以向这个服务器发送数据请求（通配符是 '*'，表示允许所有的源，也可以单独设置某个源，如 'http://localhost:8000'，这样只允许 http://localhost:8000 的请求）。

不使用通配符 '*' 是为了保证接口和数据的安全，即不能让所有的源都能访问。而且一旦设置了允许携带凭证过来，则设置 '*' 通配符会被报错，此时只能设置具体的源！且只能设置一个允许访问的源。 7 8

3.2.2.2 Access-Control-Allow-Credentials
res.header('Access-Control-Allow-Credentials', true)

是否允许跨域的时候携带凭证（例如 cookie 凭证，设置为 true 为允许携带 cookie 凭证，false 为不允许。设置为 false 客户端和服务器之间不会传递 cookie，这样 session 存储就失效了）（session 之所以有用是因为客户端从 cookie 中取 sid ，即将 sid 通过 cookie 传递给服务器进行校验）

携带凭证需要客户端设置 withCredentials: true，此时，若 Access-Control-Allow-Origin 设置为通配符 '*'，即 res.header('Access-Control-Allow-Origin', '*') ，浏览器会报错（因为任何域都携带凭证请求会影响安全）。只允许设置域形式。

3.2.2.2-1.png

同样，若 Access-Control-Allow-Origin 设置多个 域，即 res.header('Access-Control-Allow-Origin', 'http://localhost:8000, http://localhost:8001') ，浏览器会报错。

3.2.2.2-2.png

即在客户端携带凭证请求情况下只能设置允许一个域的请求。 7 8

未设置 withCredentials 为 true 时的请求头（无 cookie）

浅谈跨域问题的出现及其解决方案_第6张图片
3.2.2.2-3.png

设置 withCredentials 为 true 时的请求头（有 cookie）

浅谈跨域问题的出现及其解决方案_第7张图片
3.2.2.2-4.png
3.2.2.3 Access-Control-Allow-Headers
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-Width, Cookie')

设置允许的请求头部信息，即哪些头部信息是合法的。

3.2.2.4 Access-Control-Allow-Methods
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, HEAD, OPTIONS')

允许的请求方式（一定要有 OPTIONS）。

3.2.3 CORS 跨域不足

若携带凭证发起请求，CORS 只能指定一个允许源，不能使用通配符和指定多个源。

3.3 node 作为中间件代理

Nodejs 的 request 模块是服务端发起请求的工具包，可在本服务器向其他域的服务器发起请求。使用前需安装 request 插件。 9

yarn add request

客户端发送请求

客户端（静态资源）服务器端配置

/**
 * 客户端（静态资源）服务器
 */

let express = require('express'),
    app = express()
    request = require('request')

app.listen(9000, () => {
  console.log('静态资源服务器启动成功，运行在9000端口')
})

app.get('/queryInfo', (req, res) => {
  // 在服务器向其他域发起请求
  request('http://localhost:5000/queryInfo', (err, response, body) => {
    res.send(body)
  })
})

app.use(express.static('./static'))

接口调用

3.3-1.png
3.3-2.png

返回数据

浅谈跨域问题的出现及其解决方案_第8张图片
3.3-3.png

3.4 http proxy 代理

proxy 只是一层代理，用于把指定 path 代理去数据服务器提供的地址，他的背后是由 node server 提供服务的。

同源策略限制是浏览器进行限制的，服务器间相互数据请求并不受浏览器同源策略限制。

设置代理后，当客户端请求某跨域接口时，实际请求的是客户端所在服务器某个接口， 当客户端服务器收到客户端请求时，会根据代理设置，通过服务器间通信请求数据服务器的数据（跨域数据），请求到数据后，再将数据通过客户端服务器返回给客户端。

这样，客户端请求的是自身服务器接口，而不是跨域接口，不会受同源策略限制，实现跨域。 10

3.4.1 proxy 跨域设置
3.4.1.1 webpack 中 proxy 设置

webpack dev-server 使用了非常强大的 http-proxy-middleware 包用于解决跨域请求。

在 webpack.config.js 文件中进行配置。 11

简单配置

devServer: {
  proxy: {
     "/queryInfo": "http://localhost:5000"
  }
}

复杂配置

devServer: {
  proxy: {
    '/queryInfo': {
      target: 'http://localhost:5000',
      changeOrigin: true
    }
  }
}

客户端发送请求

接口调用

浅谈跨域问题的出现及其解决方案_第9张图片
3.4.1.1-1.png

返回数据

浅谈跨域问题的出现及其解决方案_第10张图片
3.4.1.1-2.png
3.4.1.2 vue 中 proxy 设置

在 vue.config.js 中进行配置。 12

简单配置

简单配置，这样配置后全局接口都会被代理到 http://localhost:5000

module.exports = {
  // 简单配置
  devServer: {
    proxy: 'http://localhost:5000'
  }
}

复杂配置

如果要配置部分接口代理，或进行 https 支持等设置，可进行复杂配置。

module.exports = {
  // 复杂配置
  devServer: {
    proxy: {
      '/queryInfo': {
        target: 'http://localhost:5000',
        ws: true,
        changeOrigin: true
      },
    }
  }
}

客户端发送请求

接口调用

浅谈跨域问题的出现及其解决方案_第11张图片
3.4.1.2-1.png

返回数据

浅谈跨域问题的出现及其解决方案_第12张图片
3.4.1.2-2.png
3.4.1.3 react 中 proxy 设置

简单配置

可在 package.json 中进行简单配置，这样配置后全局接口都会被代理到 http://localhost:5000 。13

"proxy": "http://localhost:5000"

复杂配置

如果要配置部分接口代理，或进行 https 支持等设置，可在 src 目录下新建 setupProxy.js 文件进行复杂配置。

使用此配置需先安装 http-proxy-middleware 插件。 13

yarn add http-proxy-middleware

// setupProxy.js 设置
const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  app.use(
    '/queryInfo',
    proxy({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  )
}

客户端发送请求

import axios from 'axios'

// axios.get('http://localhost:5000/queryInfo').then((res) => {
//   console.log(res)
// })

axios.get('/queryInfo').then((res) => {
  console.log(res)
})

接口调用

浅谈跨域问题的出现及其解决方案_第13张图片
3.4.1.3-1.png

返回数据

浅谈跨域问题的出现及其解决方案_第14张图片
3.4.1.3-2.png
3.4.2 proxy 缺点

仅在本地开发环境中使用，由于线上使用的是打包后的静态文件，故需要线上环境服务器配置以支持跨域。

3.5 nginx 反向代理

使用 nginx 启动客户端服务（http://localhost:7000）跨域请求服务端数据（http://localhost:5000/queryInfo），此时受浏览器同源策略限制，浏览器会报错。 14

客户端发送请求
3.5-1.png

客户端服务器配置

可在 niginx 服务器文件夹 conf/nginx.conf 下进行代理配置。

server {
    listen       7000; // 端口号设置
    server_name  localhost;

    location / {
        root   html/test; // 静态资源文件夹
        index  index.html index.htm;
    }

    location /queryInfo { // 跨域代理设置
        proxy_pass http://localhost:5000;
    }
}

客户端发送请求

设置后，客户端 axios 请求需改为 axios.get('/queryInfo') 以形成访问同源接口样式。

接口调用

3.5-2.png

返回数据

3.5-3.png

3.6 window.name

3.6.1 window.name 特性

页面在浏览器端展示的时候，总能在控制台拿到一个全局变量 window，该变量有一个 name 属性，其有以下特征： 15

  • 每个浏览器窗口都有独立的 window.name 与之对应。
  • 在一个浏览器窗口的生命周期中（被关闭前），窗口载入的所有页面同时共享一个 window.name，每个页面对 window.name 都有读写的权限。
  • window.name 一直存在与当前窗口，即使是有新的页面载入也不会改变 window.name 的。
  • window.name 可以存储不超过 2M 的数据，数据格式按需自定义。

举例

在 C页面（http://localhost:5000/window.name/C.html）请求同源服务器，获取到数据并赋值给window.name。
浅谈跨域问题的出现及其解决方案_第15张图片
3.6.1-1.png

此时，在同一浏览器窗口，将链接改为非同源的 A页面（http://localhost:8000/window.name/A.html），发现此时仍可以通过 window.name 拿到数据。

浅谈跨域问题的出现及其解决方案_第16张图片
3.6.1-2.png

利用这一点，可以试图在 A页面 用 iframe 加载 C页面，然后取到其 window.name 中的值。

运行发现浏览器进行了跨域请求限制。

3.6.1-3.png
3.6.2 利用 window.name 进行跨域

因为 A页面 与 C页面 一直存在于同一浏览器窗口内，window.name 值一直存在，所以可以使用无任何内容的 中间页面 proxy.html（与 A页面 同源），在 C页面 加载后，将 iframe 的 src 值更改为中间页面 proxy.html ，此时，proxy.html 页面的 window.name 值与 C页面 是一致的。由于 A页面 与 中间页面 proxy.html 同源，故 A页面 此时可以取到 window.name 值。 15
3.6.2-1.png

3.7 document.domain

3.7.1 document.domain 跨域使用

document.domain 用来得到当前网页的域名两个文档，只有在 document.domain 都被设定为同一个值，表明他们打算协作；或者都没有设定 document.domain 属性并且 url 的域是一致的，这两种条件下，一个文档才可以去访问另一个文档。

如果不是因为这个特殊的策略，每一个站点都会成为他的子域的 XSS 攻击的对象（例如，http://a.test.com 可以被来自 http://b.test.com 站点的恶意文件攻击）。

利用两个文档 document.domain 相同即可协作的特性，在 A页面 使用 iframe 加载 B页面，并将 A页与B页面设置相同的 document.domain ，进行跨域获取数据。 16

A页面

// A页面链接 http://a.test.com:5000/document.domain/A.html

B页面

返回数据

3.7.1-1.png
3.7.2 document.domain 的缺点

在根域范围内，浏览器允许把 domain 属性的值设置为它的上一级域。例如，在 a.test.com 域内，可以把domain 设置为 test.com 。 16

所以 document.domain 只能处理父域相同，子域不同的情况。

3.8 postMessage

受浏览器跨域限制，非同源的页面无法进行通信，window.postMessage() 方法提供了一种受控机制来规避此限制。window.postMessage() 方法可以安全地实现 Window 对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的 iframe 之间。

一般来说，一个窗口可以获得对另一个窗口的引用（例如，通过 targetWindow=window.opener )，然后使用 targetWindow.postMessage() 在其上派发 MessageEvent。接收窗口随后可根据需要自行处理此事件。传递给 window.postMessage() 的参数通过事件对象暴露给接收窗口。

3.8.1 postMessage API 与 onmessage API
3.8.1.1 postMessage API

targetWindow.postMessage(message, targetOrigin, [transfer]) 有三个参数，transfer 可选。 17

  • mesaage 就是要发送到目标窗口的消息。
  • targetOrigin 就是指定目标窗口的来源，必须与消息发送目标相一致。如果接收方窗口的协议、主机地址或端口这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会被发送。值可以是字符串 “*” 或 url 。 “*” 表示任何目标窗口都可接收。
  • transfer 是可选项，数组内的对象是实现 Transferable 接口的对象。它和 message 一样会被传递给目标页面，这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。
3.8.1.1 onmessage API
window.onmessage = function(e){ }

参数 e 为 message 实例，里面包含了 data、origin、source 等属性，data 是发送方发送的 message , origin 是发送方所属的域，source 是发送方的 window 对象的引用。

3.8.2 使用 postMessage 实现跨域通信

A页面

// A页面链接 http://localhost:8000/postMessage/A.html

B页面

// B页面链接 http://localhost:5000/postMessage/B.html

  
B页面请求同源接口获取数据

返回数据

3.8.2-1.png

4 总结

跨域方式 跨域分类 静态资源服务器配合 数据服务器配合
jsonp JSOP 否 是
cors CORS 否 是
node request 代理 是 否
http proxy 代理 是 否
nginx 代理 是 否
window.name iframe 否 是（页面）
document.domain iframe 否 是（页面）
postMessage iframe 否 是（页面）

5 主要参考资料

[1] 什么是跨域？跨域解决方法

[2] 浏览器为什么要设计同源策略？

[3] AJAX跨域访问被禁止的原因

[4] 对于浏览器的同源策略你是怎样理解的呢？

[5] JSONP

[6] axios

[7] cors实现请求跨域

[8] CORS on ExpressJS

[9 Request - Simplified HTTP client

[10] webpack配置proxy反向代理的原理是什么？

[11] webpack devServer.proxy

[12] Vue devServer.proxy

[13] React Proxying API Requests in Development

[14] nginx 之 proxy_pass详解

[15] JS跨域--window.name

[16] Document.domain

[17] 利用window.postMessage()实现跨域消息传递

你可能感兴趣的:(浅谈跨域问题的出现及其解决方案)

  • 斤斤计较的婚姻到底有多难？ 白心之岂必有为
    很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
  • 情绪觉察日记第37天 露露_e800
    今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
  • 芦花鞋一四 许叶晗
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
  • QQ群采集助手，精准引流必备神器 2401_87347160 其他经验分享
    功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
  • 关于沟通这件事，项目经理不需要每次都面对面进行 流程大师兄
    很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
  • 机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习python
    一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说 造命者说
    底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
  • 2020-01-25 晴岚85
    郑海燕坚持分享590天2020.1.24在生活中只存在两个问题。一个问题是：你知道想要达成的目标是什么，但却不知道如何才能达成；另一个问题是：你不知道你的目标是什么。前一个是行动的问题，后一个是结果的问题。通过制定具体的下一步行动，可以解决不知道如何开始行动的问题。而通过去想象结果，对结果做预估，可以解决找不着目标的问题。对于所有吸引我们注意力，想要完成的任务，你可以先想象一下，预期的结果究竟是什
  • 随笔 | 仙一般的灵气 海思沧海
    仙岛今天，我看了你全部，似乎已经进入你的世界我不知道，这是否是梦幻，还是你仙一般的灵气吸引了我也许每一个人都要有一份属于自己的追求，这样才能够符合人生的梦想，生活才能够充满着阳光与快乐我不知道，我为什么会这样的感叹，是在感叹自己的人生，还是感叹自己一直没有孜孜不倦的追求只感觉虚度了光阴，每天活在自己的梦中，活在一个不真实的世界是在逃避自己，还是在逃避周围的一切有时候我嘲笑自己，嘲笑自己如此的虚无，
  • 想家 爆米花机
    也许不同于大家对家乡的思念，我对家乡甚至是疯狂的不舍。还未踏出车站就感觉到幸福，我享受这里的夕阳、这里的浓烈柴火味、这里每一口家常菜。我是宅女，我贪恋家的安逸。刚刚踏出大学校门，初出茅庐，无法适应每年只能国庆和春节回家。我焦虑、失眠、无端发脾气，是无法适应工作的节奏，是无法接受我将一步步离开家乡的事实。我不想承认自己胸无大志，选择再次踏上征程。图片发自App
  • 【iOS】MVC设计模式 Magnetic_h iosmvc设计模式objective-c学习ui
    MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
  • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
    前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
  • 一百九十四章. 自相矛盾 巨木擎天
    唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
    本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
  • C语言宏函数 南林yan C语言c语言
    一、什么是宏函数？通过宏定义的函数是宏函数。如下，编译器在预处理阶段会将Add(x,y)替换为((x)*(y))#defineAdd(x,y)((x)*(y))#defineAdd(x,y)((x)*(y))intmain(){inta=10;intb=20;intd=10;intc=Add(a+d,b)*2;cout<
  • 地推话术，如何应对地推过程中家长的拒绝 校师学
    相信校长们在做地推的时候经常遇到这种情况：市场专员反馈家长不接单，咨询师反馈难以邀约这些家长上门，校区地推疲软，招生难。为什么？仅从地推层面分析，一方面因为家长受到的信息轰炸越来越多，对信息越来越“免疫”；而另一方面地推人员的专业能力和营销话术没有提高，无法应对家长的拒绝，对有意向的家长也不知如何跟进，眼睁睁看着家长走远；对于家长的疑问，更不知道如何有技巧地回答，机会白白流失。由于回答没技巧和专业
  • 谢谢你们，爱你们！ 鹿游儿
    昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
  • C语言如何定义宏函数？ 小九格物 c语言
    在C语言中，宏函数是通过预处理器定义的，它在编译之前替换代码中的宏调用。宏函数可以模拟函数的行为，但它们不是真正的函数，因为它们在编译时不会进行类型检查，也不会分配存储空间。宏函数的定义通常使用#define指令，后面跟着宏的名称和参数列表，以及宏展开后的代码。宏函数的定义方式：1.基本宏函数：这是最简单的宏函数形式，它直接定义一个表达式。#defineSQUARE(x)((x)*(x))2.带参
  • 微服务下功能权限与数据权限的设计与实现 nbsaas-boot 微服务java架构
    在微服务架构下，系统的功能权限和数据权限控制显得尤为重要。随着系统规模的扩大和微服务数量的增加，如何保证不同用户和服务之间的访问权限准确、细粒度地控制，成为设计安全策略的关键。本文将讨论如何在微服务体系中设计和实现功能权限与数据权限控制。1.功能权限与数据权限的定义功能权限：指用户或系统角色对特定功能的访问权限。通常是某个用户角色能否执行某个操作，比如查看订单、创建订单、修改用户资料等。数据权限：
  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • 小丽成长记（四十三） 玲玲54321
    小丽发现，即使她好不容易调整好自己的心态下一秒总会有不确定的伤脑筋的事出现，一个接一个的问题，人生就没有停下的时候，小问题不断出现。不过她今天看的书，她接受了人生就是不确定的，厉害的人就是不断创造确定性，在Ta的领域比别人多的确定性就能让自己脱颖而出，显示价值从而获得的比别人多的利益。正是这样的原因，因为从前修炼自己太少，使得她现在在人生道路上打怪起来困难重重，她似乎永远摆脱不了那种无力感，有种习
  • 学点心理知识，呵护孩子健康 静候花开_7090
    昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
  • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹 黄错错加油
    感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
  • Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断 尐尐呅
    结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
  • c++ 的iostream 和 c++的stdio的区别和联系 黄卷青灯77 c++算法开发语言iostreamstdio
    在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
  • 瑶池防线 谜影梦蝶
    冥华虽然逃过了影梦的军队，但他是一个忠臣，他选择上报战况。败给影梦后成逃兵，高层亡尔还活着，七重天失守......随便一条，即可处死冥华。冥华自然是知道以仙界高层的习性此信一发自己必死无疑，但他还选择上报实情，因为责任。同样此信送到仙宫后，知道此事的人，大多数人都认定冥华要完了，所以上到仙界高层，下到扫大街的，包括冥华自己，全都准备好迎接冥华之死。如果仙界现在还属于两方之争的话，冥华必死无疑。然而
  • 爬山后遗症 璃绛
    爬山，攀登，一步一步走向制高点，是一种挑战。成功抵达是一种无法言语的快乐，在山顶吹吹风，看看风景，这是从未有过的体验。然而，爬山一时爽，下山腿打颤，颠簸的路，一路向下走，腿部力量不够，走起来抖到不行，停不下来了！第二天必定腿疼，浑身酸痛，坐立难安！
  • 微信开发者验证接口开发 362217990 微信 开发者 token 验证
    微信开发者接口验证。 Token，自己随便定义，与微信填写一致就可以了。 根据微信接入指南描述 http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 第一步：填写服务器配置 第二步：验证服务器地址的有效性 第三步：依据接口文档实现业务逻辑 这里主要讲第二步验证服务器有效性。 建一个
  • 一个小编程题-类似约瑟夫环问题 BrokenDreams 编程
            今天群友出了一题：         一个数列,把第一个元素删除,然后把第二个元素放到数列的最后,依次操作下去,直到把数列中所有的数都删除,要求依次打印出这个过程中删除的数。      &
  • linux复习笔记之bash shell (5) 关于减号-的作用 eksliang linux关于减号“-”的含义linux关于减号“-”的用途linux关于“-”的含义linux关于减号的含义
        转载请出自出处： http://eksliang.iteye.com/blog/2105677        管道命令在bash的连续处理程序中是相当重要的，尤其在使用到前一个命令的studout（标准输出）作为这次的stdin（标准输入）时，就显得太重要了，某些命令需要用到文件名，例如上篇文档的的切割命令（split）、还有
  • Unix(3) 18289753290 unix ksh
    1)若该变量需要在其他子进程执行，则可用"$变量名称"或${变量}累加内容 什么是子进程？在我目前这个shell情况下，去打开一个新的shell，新的那个shell就是子进程。一般状态下，父进程的自定义变量是无法在子进程内使用的，但通过export将变量变成环境变量后就能够在子进程里面应用了。 2)条件判断： &&代表and  ||代表or&nbs
  • 关于ListView中性能优化中图片加载问题 酷的飞上天空 ListView
    ListView的性能优化网上很多信息，但是涉及到异步加载图片问题就会出现问题。 具体参看上篇文章http://314858770.iteye.com/admin/blogs/1217594   如果每次都重新inflate一个新的View出来肯定会造成性能损失严重，可能会出现listview滚动是很卡的情况，还会出现内存溢出。 现在想出一个方法就是每次都添加一个标识，然后设置图
  • 德国总理默多克：给国人的一堂“震撼教育”课 永夜-极光 教育
    http://bbs.voc.com.cn/topic-2443617-1-1.html德国总理默多克：给国人的一堂“震撼教育”课　 安吉拉—默克尔，一位经历过社会主义的东德人，她利用自己的博客，发表一番来华前的谈话，该说的话，都在上面说了，全世界想看想传播——去看看默克尔总理的博客吧！ 　　德国总理默克尔以她的低调、朴素、谦和、平易近人等品格给国人留下了深刻印象。她以实际行动为中国人上了一堂
  • 关于Java继承的一个小问题。。。 随便小屋 java
    今天看Java 编程思想的时候遇见一个问题，运行的结果和自己想想的完全不一样。先把代码贴出来！ //CanFight接口 interface Canfight { void fight(); } //ActionCharacter类 class ActionCharacter { public void fight() { System.out.pr
  • 23种基本的设计模式 aijuans 设计模式
    Abstract Factory：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。 　　Adapter：将一个类的接口转换成客户希望的另外一个接口。A d a p t e r模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 　　Bridge：将抽象部分与它的实现部分分离，使它们都可以独立地变化。 　　Builder：将一个复杂对象的构建与它的表示分离，使得同
  • 《周鸿祎自述：我的互联网方法论》读书笔记 aoyouzi 读书笔记
    从用户的角度来看,能解决问题的产品才是好产品,能方便/快速地解决问题的产品,就是一流产品.   商业模式不是赚钱模式 一款产品免费获得海量用户后,它的边际成本趋于0,然后再通过广告或者增值服务的方式赚钱,实际上就是创造了新的价值链.   商业模式的基础是用户,木有用户,任何商业模式都是浮云.商业模式的核心是产品,本质是通过产品为用户创造价值. 商业模式还包括寻找需求
  • JavaScript动态改变样式访问技术 百合不是茶 JavaScriptstyle属性ClassName属性
      一:style属性 格式:  HTML元素.style.样式属性="值";   创建菜单:在html标签中创建 或者 在head标签中用数组创建   <html> <head> <title>style改变样式</title> </head> &l
  • jQuery的deferred对象详解 bijian1013 jquerydeferred对象
            jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。         每个版本都会引入一些新功能，从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。    &nb
  • 淘宝开放平台TOP Bill_chen C++c物流C#
    淘宝网开放平台首页：http://open.taobao.com/ 淘宝开放平台是淘宝TOP团队的产品，TOP即TaoBao Open Platform， 是淘宝合作伙伴开发、发布、交易其服务的平台。 支撑TOP的三条主线为：    1.开放数据和业务流程     * 以API数据形式开放商品、交易、物流等业务；  &
  • 【大型网站架构一】大型网站架构概述 bit1129 网站架构
    大型互联网特点 面对海量用户、海量数据 大型互联网架构的关键指标 高并发 高性能 高可用 高可扩展性 线性伸缩性 安全性 大型互联网技术要点   前端优化 CDN缓存 反向代理 KV缓存 消息系统 分布式存储 NoSQL数据库 搜索 监控 安全 想到的问题： 1.对于订单系统这种事务型系统，如
  • eclipse插件hibernate tools安装 白糖_ Hibernate
    eclipse helios(3.6)版 1.启动eclipse 2.选择 Help > Install New Software...> 3.添加如下地址： http://download.jboss.org/jbosstools/updates/stable/helios/ 4.选择性安装：hibernate tools在All Jboss tool
  • Jquery easyui Form表单提交注意事项 bozch jquery easyui
    jquery easyui对表单的提交进行了封装，提交的方式采用的是ajax的方式，在开发的时候应该注意的事项如下：         1、在定义form标签的时候，要将method属性设置成post或者get，特别是进行大字段的文本信息提交的时候，要将method设置成post方式提交，否则页面会抛出跨域访问等异常。所以这个要
  • Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量 bylijinnan java实现
    import java.util.LinkedList; public class CaseInsensitiveTrie { /** 字典树的Java实现。实现了插入、查询以及深度优先遍历。 Trie tree's java implementation.(Insert,Search,DFS) Problem Description Igna
  • html css 鼠标形状样式汇总 chenbowen00 htmlcss
    css鼠标手型cursor中hand与pointer  Example：CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/>  Example：CSS鼠标手型效果 <a href="#" style=&qu
  • [IT与投资]IT投资的几个原则 comsci it
          无论是想在电商,软件,硬件还是互联网领域投资,都需要大量资金,虽然各个国家政府在媒体上都给予大家承诺,既要让市场的流动性宽松,又要保持经济的高速增长....但是,事实上,整个市场和社会对于真正的资金投入是非常渴望的,也就是说,表面上看起来,市场很活跃,但是投入的资金并不是很充足的......    
  • oracle with语句详解 daizj oraclewithwith as
    oracle with语句详解 转 在oracle中，select 查询语句，可以使用with,就是一个子查询，oracle 会把子查询的结果放到临时表中，可以反复使用 例子:注意，这是sql语句，不是pl/sql语句， 可以直接放到jdbc执行的 ----------------------------------------------------------------
  • hbase的简单操作 deng520159 数据库hbase
    近期公司用hbase来存储日志,然后再来分析 ,把hbase开发经常要用的命令找了出来. 用ssh登陆安装hbase那台linux后 用hbase shell进行hbase命令控制台! 表的管理 1）查看有哪些表 hbase(main)> list 2）创建表   # 语法：create <table>, {NAME => <family&g
  • C语言scanf继续学习、算术运算符学习和逻辑运算符 dcj3sjt126com c
    /* 2013年3月11日20:37:32 地点：北京潘家园 功能：完成用户格式化输入多个值 目的：学习scanf函数的使用 */ # include <stdio.h> int main(void) { int i, j, k; printf("please input three number:\n"); //提示用
  • 2015越来越好 dcj3sjt126com 歌曲
    越来越好 房子大了电话小了 感觉越来越好 假期多了收入高了 工作越来越好 商品精了价格活了 心情越来越好 天更蓝了水更清了 环境越来越好 活得有奔头人会步步高 想做到你要努力去做到 幸福的笑容天天挂眉梢 越来越好 婆媳和了家庭暖了 生活越来越好 孩子高了懂事多了 学习越来越好 朋友多了心相通了 大家越来越好 道路宽了心气顺了 日子越来越好 活的有精神人就不显
  • java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim feiteyizu mysql
    数据表中有记录的time字段（属性为timestamp）其值为：“0000-00-00 00:00:00” 程序使用select 语句从中取数据时出现以下异常： java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date   java.sql.SQLException: Valu
  • Ehcache（07）——Ehcache对并发的支持 234390216 并发ehcache锁ReadLockWriteLock
    Ehcache对并发的支持          在高并发的情况下，使用Ehcache缓存时，由于并发的读与写，我们读的数据有可能是错误的，我们写的数据也有可能意外的被覆盖。所幸的是Ehcache为我们提供了针对于缓存元素Key的Read（读）、Write（写）锁。当一个线程获取了某一Key的Read锁之后，其它线程获取针对于同
  • mysql中blob,text字段的合成索引 jackyrong mysql
      在mysql中，原来有一个叫合成索引的，可以提高blob,text字段的效率性能， 但只能用在精确查询，核心是增加一个列，然后可以用md5进行散列，用散列值查找 则速度快 比如： create table abc(id varchar(10),context blog,hash_value varchar(40)); insert into abc(1,rep
  • 逻辑运算与移位运算 latty 位运算逻辑运算
    源码：正数的补码与原码相同例+7 源码：00000111 补码 ：00000111 （用8位二进制表示一个数） 负数的补码： 符号位为1，其余位为该数绝对值的原码按位取反；然后整个数加1。   -7 源码： 10000111 ，其绝对值为00000111  取反加一：11111001 为-7补码 已知一个数的补码，求原码的操作分两种情况：
  • 利用XSD 验证XML文件 newerdragon javaxmlxsd
    XSD文件 （XML Schema 语言也称作 XML Schema 定义（XML Schema Definition，XSD）。 具体使用方法和定义请参看： http://www.w3school.com.cn/schema/index.asp java自jdk1.5以上新增了SchemaFactory类 可以实现对XSD验证的支持，使用起来也很方便。 以下代码可用在J
  • 搭建 CentOS 6 服务器(12) - Samba rensanning centos
    （1）安装 # yum -y install samba Installed: samba.i686 0:3.6.9-169.el6_5 # pdbedit -a rensn new password:123456 retype new password:123456 …… （2）Home文件夹 # mkdir /etc
  • Learn Nodejs 01 toknowme nodejs
    （1）下载nodejs https://nodejs.org/download/ 选择相应的版本进行下载     （2）安装nodejs 安装的方式比较多，请baidu下 我这边下载的是“node-v0.12.7-linux-x64.tar.gz”这个版本 （1）上传服务器 （2）解压 tar -zxvf  node-v0.12.
  • jquery控制自动刷新的代码举例 xp9802 jquery
    1、html内容部分  复制代码代码示例: <div id='log_reload'> <select name="id_s" size="1"> <option value='2'>-2s-</option> <option value='3'>-3s-</option
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他