跨域

野性酷女 2021-12-18 14:59 358阅读 0赞

#  #

2018-07-11 发布

# [不要再问我跨域的问题了][Link 1] #

*  [javascript][]
 *  
 *  [前端][Link 2]
 *  
 *  [跨域][Link 3]

116.5k 次阅读 · 读完需要 40 分钟

762

> 写下这篇文章后我想，要不以后就把这种基础的常见知识都归到这个“不要再问我XX的问题”，形成一系列内容，希望大家看完之后再有人问你这些问题，你心里会窃喜：“嘿嘿，是时候展现真正的技术了！”  
> 一、 [不要再问我this的指向问题了][this]

跨域这两个字就像一块狗皮膏药一样黏在每一个前端开发者身上，无论你在工作上或者面试中无可避免会遇到这个问题。为了应付面试，我每次都随便背几个方案，也不知道为什么要这样干，反正面完就可以扔了，我想工作上也不会用到那么多乱七八糟的方案。到了真正工作，开发环境有webpack-dev-server搞定，上线了服务端的大佬们也会配好，配了什么我不管，反正不会跨域就是了。日子也就这么混过去了，终于有一天，我觉得不能再继续这样混下去了，我一定要彻底搞懂这个东西！于是就有了这篇文章。

## 要掌握跨域，首先要知道为什么会有跨域这个问题出现 ##

确实，我们这种搬砖工人就是为了混口饭吃嘛，好好的调个接口告诉我跨域了，这种阻碍我们轻松搬砖的事情真恶心！为什么会跨域？是谁在搞事情？为了找到这个问题的始作俑者，请点击[浏览器的同源策略][Link 4]。  
这么官方的东西真难懂，没关系，至少你知道了，因为浏览器的同源策略导致了跨域，就是浏览器在搞事情。  
所以，浏览器为什么要搞事情？就是不想给好日子我们过？对于这样的质问，浏览器甩锅道：“同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。”  
这么官方的话术真难懂，没关系，至少你知道了，似乎这是个安全机制。  
所以，究竟为什么需要这样的安全机制？这样的安全机制解决了什么问题？别急，让我们继续研究下去。

## 没有同源策略限制的两大危险场景 ##

据我了解，浏览器是从两个方面去做这个同源策略的，一是针对接口的请求，二是针对Dom的查询。试想一下没有这样的限制上述两种动作有什么危险。

### 没有同源策略限制的接口请求 ###

有一个小小的东西叫cookie大家应该知道，一般用来处理登录等场景，目的是让服务端知道谁发出的这次请求。如果你请求了接口进行登录，服务端验证通过后会在响应头加入Set-Cookie字段，然后下次再发请求的时候，浏览器会自动将cookie附加在HTTP请求的头字段Cookie中，服务端就能知道这个用户已经登录过了。知道这个之后，我们来看场景：  
1.你准备去清空你的购物车，于是打开了买买买网站www.maimaimai.com，然后登录成功，一看，购物车东西这么少，不行，还得买多点。  
2.你在看有什么东西买的过程中，你的好基友发给你一个链接www.nidongde.com，一脸yin笑地跟你说：“你懂的”，你毫不犹豫打开了。  
3.你饶有兴致地浏览着www.nidongde.com，谁知这个网站暗地里做了些不可描述的事情！由于没有同源策略的限制，它向www.maimaimai.com发起了请求！聪明的你一定想到上面的话“服务端验证通过后会在响应头加入Set-Cookie字段，然后下次再发请求的时候，浏览器会自动将cookie附加在HTTP请求的头字段Cookie中”，这样一来，这个不法网站就相当于登录了你的账号，可以为所欲为了！如果这不是一个买买买账号，而是你的银行账号，那……  
这就是传说中的CSRF攻击[浅谈CSRF攻击方式][CSRF]。  
看了这波CSRF攻击我在想，即使有了同源策略限制，但cookie是明文的，还不是一样能拿下来。于是我看了一些cookie相关的文章[聊一聊 cookie][cookie]、[Cookie/Session的机制与安全][Cookie_Session]，知道了服务端可以设置httpOnly，使得前端无法操作cookie，如果没有这样的设置，像XSS攻击就可以去获取到cookie[Web安全测试之XSS][Web_XSS]；设置secure，则保证在https的加密通信中传输以防截获。

### 没有同源策略限制的Dom查询 ###

1.有一天你刚睡醒，收到一封邮件，说是你的银行账号有风险，赶紧点进www.yinghang.com改密码。你吓尿了，赶紧点进去，还是熟悉的银行登录界面，你果断输入你的账号密码，登录进去看看钱有没有少了。  
2.睡眼朦胧的你没看清楚，平时访问的银行网站是www.yinhang.com，而现在访问的是www.yinghang.com，这个钓鱼网站做了什么呢？

// HTML
    <iframe name="yinhang" src="www.yinhang.com"></iframe>
    // JS
    // 由于没有同源策略的限制，钓鱼网站可以直接拿到别的网站的Dom
    const iframe = window.frames['yinhang']
    const node = iframe.document.getElementById('你输入账号密码的Input')
    console.log(`拿到了这个${node}，我还拿不到你刚刚输入的账号密码吗`)

由此我们知道，同源策略确实能规避一些危险，不是说有了同源策略就安全，只是说同源策略是一种浏览器最基本的安全机制，毕竟能提高一点攻击的成本。其实没有刺不穿的盾，只是攻击的成本和攻击成功后获得的利益成不成正比。

## 跨域正确的打开方式 ##

经过对同源策略的了解，我们应该要消除对浏览器的误解，同源策略是浏览器做的一件好事，是用来防御来自邪门歪道的攻击，但总不能为了不让坏人进门而把全部人都拒之门外吧。没错，我们这种正人君子只要打开方式正确，就应该可以跨域。  
下面将一个个演示正确打开方式，但在此之前，有些准备工作要做。为了本地演示跨域，我们需要：  
1.随便跑起一份前端代码（以下前端是随便跑起来的vue），地址是[http://localhost][http_localhost]:9099。  
2.随便跑起一份后端代码（以下后端是随便跑起来的node koa2），地址是[http://localhost][http_localhost]:9971。

### 同源策略限制下接口请求的正确打开方式 ###

**1.JSONP**  
在HTML标签里，一些标签比如script、img这样的获取资源的标签是没有跨域限制的，利用这一点，我们可以这样干：

后端写个小接口

// 处理成功失败返回格式的工具
    const {successBody} = require('../utli')
    class CrossDomain {
      static async jsonp (ctx) {
        // 前端传过来的参数
        const query = ctx.request.query
        // 设置一个cookies
        ctx.cookies.set('tokenId', '1')
        // query.cb是前后端约定的方法名字，其实就是后端返回一个直接执行的方法给前端，由于前端是用script标签发起的请求，所以返回了这个方法后相当于立马执行，并且把要返回的数据放在方法的参数里。
        ctx.body = `${query.cb}(${JSON.stringify(successBody({msg: query.msg}, 'success'))})`
      }
    }
    module.exports = CrossDomain

简单版前端

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
      </head>
      <body>
        <script type='text/javascript'>
          // 后端返回直接执行的方法，相当于执行这个方法，由于后端把返回的数据放在方法的参数里，所以这里能拿到res。
          window.jsonpCb = function (res) {
            console.log(res)
          }
        </script>
        <script src='http://localhost:9871/api/jsonp?msg=helloJsonp&cb=jsonpCb' type='text/javascript'></script>
      </body>
    </html>

简单封装一下前端这个套路

/**
     * JSONP请求工具
     * @param url 请求的地址
     * @param data 请求的参数
     * @returns {Promise<any>}
     */
    const request = ({url, data}) => {
      return new Promise((resolve, reject) => {
        // 处理传参成xx=yy&aa=bb的形式
        const handleData = (data) => {
          const keys = Object.keys(data)
          const keysLen = keys.length
          return keys.reduce((pre, cur, index) => {
            const value = data[cur]
            const flag = index !== keysLen - 1 ? '&' : ''
            return `${pre}${cur}=${value}${flag}`
          }, '')
        }
        // 动态创建script标签
        const script = document.createElement('script')
        // 接口返回的数据获取
        window.jsonpCb = (res) => {
          document.body.removeChild(script)
          delete window.jsonpCb
          resolve(res)
        }
        script.src = `${url}?${handleData(data)}&cb=jsonpCb`
        document.body.appendChild(script)
      })
    }
    // 使用方式
    request({
      url: 'http://localhost:9871/api/jsonp',
      data: {
        // 传参
        msg: 'helloJsonp'
      }
    }).then(res => {
      console.log(res)
    })

**2.空iframe加form**  
细心的朋友可能发现，JSONP只能发GET请求，因为本质上script加载资源就是GET，那么如果要发POST请求怎么办呢？

后端写个小接口

// 处理成功失败返回格式的工具
    const {successBody} = require('../utli')
    class CrossDomain {
      static async iframePost (ctx) {
        let postData = ctx.request.body
        console.log(postData)
        ctx.body = successBody({postData: postData}, 'success')
      }
    }
    module.exports = CrossDomain

前端

const requestPost = ({url, data}) => {
      // 首先创建一个用来发送数据的iframe.
      const iframe = document.createElement('iframe')
      iframe.name = 'iframePost'
      iframe.style.display = 'none'
      document.body.appendChild(iframe)
      const form = document.createElement('form')
      const node = document.createElement('input')
      // 注册iframe的load事件处理程序,如果你需要在响应返回时执行一些操作的话.
      iframe.addEventListener('load', function () {
        console.log('post success')
      })
    
      form.action = url
      // 在指定的iframe中执行form
      form.target = iframe.name
      form.method = 'post'
      for (let name in data) {
        node.name = name
        node.value = data[name].toString()
        form.appendChild(node.cloneNode())
      }
      // 表单元素需要添加到主文档中.
      form.style.display = 'none'
      document.body.appendChild(form)
      form.submit()
    
      // 表单提交后,就可以删除这个表单,不影响下次的数据发送.
      document.body.removeChild(form)
    }
    // 使用方式
    requestPost({
      url: 'http://localhost:9871/api/iframePost',
      data: {
        msg: 'helloIframePost'
      }
    })

**3.CORS**

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）[跨域资源共享 CORS 详解][CORS]。看名字就知道这是处理跨域问题的标准做法。CORS有两种请求，简单请求和非简单请求。

> 这里引用上面链接阮一峰老师的文章说明一下简单请求和非简单请求。  
> 浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

只要同时满足以下两大条件，就属于简单请求。  
（1) 请求方法是以下三种方法之一：

*  HEAD
 *  GET
 *  POST

（2）HTTP的头信息不超出以下几种字段：

*  Accept
 *  Accept-Language
 *  Content-Language
 *  Last-Event-ID
 *  Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

1.简单请求  
后端

// 处理成功失败返回格式的工具
    const {successBody} = require('../utli')
    class CrossDomain {
      static async cors (ctx) {
        const query = ctx.request.query
        // *时cookie不会在http请求中带上
        ctx.set('Access-Control-Allow-Origin', '*')
        ctx.cookies.set('tokenId', '2')
        ctx.body = successBody({msg: query.msg}, 'success')
      }
    }
    module.exports = CrossDomain

前端什么也不用干，就是正常发请求就可以，如果需要带cookie的话，前后端都要设置一下，下面那个非简单请求例子会看到。

fetch(`http://localhost:9871/api/cors?msg=helloCors`).then(res => {
      console.log(res)
    })

2.非简单请求  
非简单请求会发出一次预检测请求，返回码是204，预检测通过才会真正发出请求，这才返回200。这里通过前端发请求的时候增加一个额外的headers来触发非简单请求。  
![clipboard.png][]

后端

// 处理成功失败返回格式的工具
    const {successBody} = require('../utli')
    class CrossDomain {
      static async cors (ctx) {
        const query = ctx.request.query
        // 如果需要http请求中带上cookie，需要前后端都设置credentials，且后端设置指定的origin
        ctx.set('Access-Control-Allow-Origin', 'http://localhost:9099')
        ctx.set('Access-Control-Allow-Credentials', true)
        // 非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）
        // 这种情况下除了设置origin，还需要设置Access-Control-Request-Method以及Access-Control-Request-Headers
        ctx.set('Access-Control-Request-Method', 'PUT,POST,GET,DELETE,OPTIONS')
        ctx.set('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, t')
        ctx.cookies.set('tokenId', '2')
    
        ctx.body = successBody({msg: query.msg}, 'success')
      }
    }
    module.exports = CrossDomain

一个接口就要写这么多代码，如果想所有接口都统一处理，有什么更优雅的方式呢？见下面的koa2-cors。

const path = require('path')
    const Koa = require('koa')
    const koaStatic = require('koa-static')
    const bodyParser = require('koa-bodyparser')
    const router = require('./router')
    const cors = require('koa2-cors')
    const app = new Koa()
    const port = 9871
    app.use(bodyParser())
    // 处理静态资源 这里是前端build好之后的目录
    app.use(koaStatic(
      path.resolve(__dirname, '../dist')
    ))
    // 处理cors
    app.use(cors({
      origin: function (ctx) {
        return 'http://localhost:9099'
      },
      credentials: true,
      allowMethods: ['GET', 'POST', 'DELETE'],
      allowHeaders: ['t', 'Content-Type']
    }))
    // 路由
    app.use(router.routes()).use(router.allowedMethods())
    // 监听端口
    app.listen(9871)
    console.log(`[demo] start-quick is starting at port ${port}`)

前端

fetch(`http://localhost:9871/api/cors?msg=helloCors`, {
      // 需要带上cookie
      credentials: 'include',
      // 这里添加额外的headers来触发非简单请求
      headers: {
        't': 'extra headers'
      }
    }).then(res => {
      console.log(res)
    })

**4.代理**  
想一下，如果我们请求的时候还是用前端的域名，然后有个东西帮我们把这个请求转发到真正的后端域名上，不就避免跨域了吗？这时候，Nginx出场了。  
Nginx配置

server{
        # 监听9099端口
        listen 9099;
        # 域名是localhost
        server_name localhost;
        #凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871 
        location ^~ /api {
            proxy_pass http://localhost:9871;
        }    
    }

前端就不用干什么事情了，除了写接口，也没后端什么事情了

// 请求的时候直接用回前端这边的域名http://localhost:9099，这就不会跨域，然后Nginx监听到凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871 
    fetch('http://localhost:9099/api/iframePost', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        msg: 'helloIframePost'
      })
    })

Nginx转发的方式似乎很方便！但这种使用也是看场景的，如果后端接口是一个公共的API，比如一些公共服务获取天气什么的，前端调用的时候总不能让运维去配置一下Nginx，如果兼容性没问题（IE 10或者以上），CROS才是更通用的做法吧。

### 同源策略限制下Dom查询的正确打开方式 ###

**1.postMessage**  
window.postMessage() 是HTML5的一个接口，专注实现不同窗口不同页面的跨域通讯。  
为了演示方便，我们将hosts改一下：127.0.0.1 crossDomain.com，现在访问域名crossDomain.com就等于访问127.0.0.1。

这里是[http://localhost][http_localhost]:9099/\#/crossDomain，发消息方

<template>
      <div>
        <button @click="postMessage">给http://crossDomain.com:9099发消息</button>
        <iframe name="crossDomainIframe" src="http://crossdomain.com:9099"></iframe>
      </div>
    </template>
    
    <script>
    export default {
      mounted () {
        window.addEventListener('message', (e) => {
          // 这里一定要对来源做校验
          if (e.origin === 'http://crossdomain.com:9099') {
            // 来自http://crossdomain.com:9099的结果回复
            console.log(e.data)
          }
        })
      },
      methods: {
        // 向http://crossdomain.com:9099发消息
        postMessage () {
          const iframe = window.frames['crossDomainIframe']
          iframe.postMessage('我是[http://localhost:9099], 麻烦你查一下你那边有没有id为app的Dom', 'http://crossdomain.com:9099')
        }
      }
    }
    </script>

这里是[http://crossdomain.com][http_crossdomain.com]:9099，接收消息方

<template>
      <div>
        我是http://crossdomain.com:9099
      </div>
    </template>
    
    <script>
    export default {
      mounted () {
        window.addEventListener('message', (e) => {
          // 这里一定要对来源做校验
          if (e.origin === 'http://localhost:9099') {
            // http://localhost:9099发来的信息
            console.log(e.data)
            // e.source可以是回信的对象，其实就是http://localhost:9099窗口对象(window)的引用
            // e.origin可以作为targetOrigin
            e.source.postMessage(`我是[http://crossdomain.com:9099]，我知道了兄弟，这就是你想知道的结果：${document.getElementById('app') ? '有id为app的Dom' : '没有id为app的Dom'}`, e.origin);
          }
        })
      }
    }
    </script>

结果可以看到：

![clipboard.png][clipboard.png 1]

**2.document.domain**  
这种方式只适合主域名相同，但子域名不同的iframe跨域。  
比如主域名是[http://crossdomain.com][http_crossdomain.com]:9099，子域名是[http://child.crossdomain.com][http_child.crossdomain.com]:9099，这种情况下给两个页面指定一下document.domain即document.domain = crossdomain.com就可以访问各自的window对象了。

**3.canvas操作图片的跨域问题**  
这个应该是一个比较冷门的跨域问题，张大神已经写过了我就不再班门弄斧了[解决canvas图片getImageData,toDataURL跨域问题][canvas_getImageData_toDataURL]

## 最后 ##

希望看完这篇文章之后，再有人问跨域的问题，你可以嘴角微微上扬，冷笑一声：“不要再问我跨域的问题了。”  
扬长而去。

*  [![creativecommons-cc.svg][]][creativecommons-cc.svg 1]
 *

*  新浪微博
 *  微信
 *  Twitter
 *  Facebook

赞 | 762收藏 | 627

你可能感兴趣的

*  [跨域请求][Link 5]kowalski[javascript][javascript 1][html][]
 *  [如何真正理解用Nginx代理来解决同源策略][Nginx]小纯纯[前端][Link 6]
 *  [跨域问题之ajax][ajax]驽马[ajax跨域][ajax 1][跨域][Link 7]
 *  [跨域，了解一下][Link 8]如水[javascript][javascript 1][html5][]
 *  [iframe跨域POST提交][iframe_POST]枫s的思念[javascript][javascript 1][post][][form][]
 *  [跨域问题汇总][Link 9]陈凤娟[javascript][javascript 1][html5][]
 *  [再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS][AJAX_ _ - JSONP _ CORS]libinfs[跨域][Link 7][ajax][ajax 2][javascript][javascript 1]
 *  [解决ajax跨域问题][ajax 3]萧逸[javascript][javascript 1]

**76 条评论**

默认排序时间排序

[![941590541-5b44218814b6c_big64][]][941590541-5b44218814b6c_big64 1]

**[鲸落丶][941590541-5b44218814b6c_big64 1]** · 2018年07月11日

工作中确实不怎么遇到，但是遇到一次就很头疼了，233

赞 回复

所以干脆一次性学会哈

— [**写Bug** ][Bug_]作者 · 2018年07月11日

添加回复

[![user-64.png][]][user-64.png 1]

**[大飞囊][user-64.png 1]** · 2018年07月11日

后面看不懂~~~先收藏了

赞 回复

哪里不懂，肯定是我写得不好见谅见谅

— [**写Bug** ][Bug_]作者 · 2018年07月11日

[@写Bug][Bug_] 写的灰常好呀，只是我刚刚入行，有些不懂而已。。。

— [**大飞囊** ][user-64.png 1]· 2018年07月11日

[@写Bug][Bug_] 写的蛮好的

— [**Shirley** ][Shirley_]· 2018年07月11日

添加回复 | 显示更多

[![3849046299-5a0e70fee3e55_big64][]][3849046299-5a0e70fee3e55_big64 1]

**[\_John][3849046299-5a0e70fee3e55_big64 1]** · 2018年07月11日

就问

赞 回复

哈哈，现在没那么怕问了

— [**写Bug** ][Bug_]作者 · 2018年07月11日

添加回复

[![1548351972-5a8f8213c0c39_big64][]][1548351972-5a8f8213c0c39_big64 1]

**[vbyzc][1548351972-5a8f8213c0c39_big64 1]** · 2018年07月11日

只能理解为，就算为了面试去刷面试题，答对了也只是为了通过面试，这个可以理解

赞 回复

但刷来的知识始终不是自己的知识，还是要自己去实践一下

— [**写Bug** ][Bug_]作者 · 2018年07月11日

活捉老僧

— [**weiwentao518** ][weiwentao518_]· 4月4日

除了nginx，其它的跨域方式我感觉都很非主流

— [**Love4Food** ][Love4Food_]· 5月9日

添加回复 | 显示更多

[![451972963-5a67dff5c9e07_big64][]][451972963-5a67dff5c9e07_big64 1]

**[learnmeahaskell][451972963-5a67dff5c9e07_big64 1]** · 2018年07月11日

非简单请求的定义是什么❓

赞 回复

不好意思，我在文章那里补充了一下可以看看。

— [**写Bug** ][Bug_]作者 · 2018年07月11日

添加回复

[![2871498483-5928e30f9350b_big64][]][2871498483-5928e30f9350b_big64 1]

**[晴天][2871498483-5928e30f9350b_big64 1]** · 2018年07月11日

给作者点赞，真的是技术越深入人越谦逊，说的很好，技术的理解始终是要靠自己动手实践的，纸上得来终觉浅。

赞 回复

谢谢，话虽然是这样说，但实践起来是真的需要勇气，一篇这样的文章，每个实例都自己完全跑通才敢写，想想都头痛，不过搞完还是收获很大的。一起加油哈。

— [**写Bug** ][Bug_]作者 · 2018年07月11日

添加回复

[![2317264532-5b0f50362ce2b_big64][]][2317264532-5b0f50362ce2b_big64 1]

**[北堂棣][2317264532-5b0f50362ce2b_big64 1]** · 2018年07月11日

看这篇文章感觉就像是有个人在我耳边讲着一样，诙谐有趣，很难懂的问题被作者讲的很通俗易懂，不错不错，后面写的代码那块，还得好好研究，但起码看完之后，对跨域这问题有了比以前深刻的了解，谢谢作者的分享。

赞 回复

非常开心有人喜欢哈，真心谢谢。

— [**写Bug** ][Bug_]作者 · 2018年07月11日

添加回复

[![4073803245-5b73f4b05cf63_big64][]][4073803245-5b73f4b05cf63_big64 1]

**[ZY2071][4073803245-5b73f4b05cf63_big64 1]** · 2018年07月11日

cors写错了

赞 回复

改了，谢谢哈

— [**写Bug** ][Bug_]作者 · 2018年07月11日

添加回复

[![867613156-5b2389d0319c2_big64][]][867613156-5b2389d0319c2_big64 1]

**[Victor][867613156-5b2389d0319c2_big64 1]** · 2018年07月11日

刚好需要，多谢

赞 回复

谢~

— [**写Bug** ][Bug_]作者 · 2018年07月11日

昨天写 跨域的cros没解决 我用的vue axios 请求头加不上 是怎么回事呢

— [**Victor** ][867613156-5b2389d0319c2_big64 1]· 2018年07月12日

加什么请求头呢？还要去确定一下后端有没有配好

— [**写Bug** ][Bug_]作者 · 2018年07月12日

添加回复 | 显示更多

[![user-64.png][]][user-64.png 2]

**[夏灬影][user-64.png 2]** · 2018年07月11日

谢谢你的分享,收藏了

赞 回复

谢谢

— [**写Bug** ][Bug_]作者 · 2018年07月11日

添加回复

[![2877019557-5abcb7cd5ef7a_big64][]][2877019557-5abcb7cd5ef7a_big64 1]

**[Xk\_John][2877019557-5abcb7cd5ef7a_big64 1]** · 2018年07月17日

请问一下，iframe+form的方法里面的

iframe.addEventListener('load', function () {
        console.log('post success')
      })

的意思是说在post请求完成后才会执行打印的意思吗？那如果我要获取post请求返回的数据要怎么写？

赞 回复

获取不到post返回的数据确实是这个方式的一个弊端

— [**写Bug** ][Bug_]作者 · 2018年07月18日

添加回复

[![user-64.png][]][user-64.png 3]

**[娇娇][user-64.png 3]** · 2018年07月18日

大神我问下 1.JSONP 中的  
// 接口返回的数据获取

window.jsonpCb = (res) => {
      document.body.removeChild(script)
      delete window.jsonpCb
      resolve(res)
    }

我老感觉上面这段代码是定义了函数名字叫jsonCb的函数，怎么能够获取后端的返回数据呢？是不是应该写成一个自执行函数，而不是定义一个函数呢？

赞 回复

是这样的，jsonp后端返回的其实是一个与前端约定好的函数名并且执行的写法比如说返回“jsonpCb(123)”，由于前端是用script请求的，请求回来得到的是jsonpCb(123)于是前端就执行了定义的jsonpCb

— [**写Bug** ][Bug_]作者 · 2018年07月18日

添加回复

[![user-64.png][]][user-64.png 4]

**[dream][user-64.png 4]** · 2018年07月19日

大神，我想问一下，是不是对于端口不同的跨域问题前端是无法解决的？如果无法解决那么在后端常用的解决方案有哪些？谢谢大神，这类问题在网上搜到的都很不完善～～～

赞 回复

跨域问题基本都需要后台配合，现在一般都用CORS，让后端配置一下就行，具体看上面文章就好哈

— [**写Bug** ][Bug_]作者 · 2018年07月19日

谢谢Bug大神，理解了很多

— [**dream** ][user-64.png 4]· 2018年07月24日

添加回复

[![3858024892-5bd712baa40b8_big64][]][3858024892-5bd712baa40b8_big64 1]

**[Parkeeers][3858024892-5bd712baa40b8_big64 1]** · 2018年07月24日

所以Bug哥，能写几篇Nginx的文章吗，跪求：）

赞 回复

不好意思，这个真的无能为力了，Nginx不是我这小前端现在能搞得了哈

— [**写Bug** ][Bug_]作者 · 2018年07月24日

[@写Bug][Bug_] 好的吧，依然点个赞

— [**Parkeeers** ][3858024892-5bd712baa40b8_big64 1]· 2018年07月24日

突然想到，类似于JSONP这种方法，如果第三方人员知道接口的类型和信息，这样第三方也是能窃取数据的哈

— [**Parkeeers** ][3858024892-5bd712baa40b8_big64 1]· 2018年07月24日

添加回复 | 显示更多

[![user-64.png][]][user-64.png 5]

**[fightforfree][user-64.png 5]** · 2018年08月31日

你好,最近我在工作中需要调用另外一个系统的接口,也涉及到跨域的问题,领导规定不能从java后台发请求,我使用了jsonp在页面进行请求,但是前台无法接收到数据,我去网上查了,发现是接口返回的数据不符合jsonp的格式要求,请问还有什么办法可以进行跨域请求(接口的系统不在我们这边,不能修改里面的代码),希望能获得你的回复,感激不尽,谢谢

赞 回复

[@fightforfree][user-64.png 5] 这种情况考虑一下反向代理如nginx，或者中间层，其实原理就是，服务端并没有跨域这个东西，你可以发起一个请求给自家的后台，跨自家的后台肯定有办法处理跨域，然后让自家的后台去请求别人的，拿到数据再给你返回来。

— [**写Bug** ][Bug_]作者 · 2018年08月31日

1.后台访问接口,再把数据返回的方法我已经用了,但是领导说不行,接口那边不愿意把我们的IP加入白名单 2.我们这个项目没有nginx,不能反向代理

— [**fightforfree** ][user-64.png 5]· 2018年08月31日

添加回复

[![user-64.png][]][user-64.png 6]

**[SuperKing][user-64.png 6]** · 2018年09月14日

你好，我前后端配置在同一台机器上，如果前端(windows)我用的是tomcat配置的web，tomcat配置的端口号是8080，后端(Ubuntu)api端口是2884，浏览器访问tomcat前端(localhost:8080)，前端再请求后端资源（localhost:2884/api）返回给浏览器，这个时候nginx应该怎么配置，配置在前端还是后端？因为这个时候8080端口已经被tomcat占用了，不能监听8080端口转发到2884端口了吧？

赞 回复

[![214432261-582e9c80d4de5_big64][]][214432261-582e9c80d4de5_big64 1]

**[我是伪极客][214432261-582e9c80d4de5_big64 1]** · 2018年10月12日

写的不错 先点个赞

赞 回复

[![4224779661-59842d027fed5_big64][]][4224779661-59842d027fed5_big64 1]

**[修齐][4224779661-59842d027fed5_big64 1]** · 2018年10月31日

楼主辛苦，学习了。  
有个问题，就是前端webpack dev server占用了9099端口，nginx怎么能再监听9099端口呢？

赞 回复

[![user-64.png][]][user-64.png 7]

**[Moon][user-64.png 7]** · 2018年12月15日

我有个问题求解答。跨域是谁在拦截，是服务器返回的头部信息里没有Access-Control-Allow-Origin 这些信息浏览器给拦截了吗？服务器不对response做特殊处理，单数据还是返回了的。可是浏览器network里看不到服务器返回的数据。。。有点疑惑，还有就是 respose里特殊处理知识为了告诉浏览器哪些域可以跨吗？

赞 回复

[![user-64.png][]][user-64.png 8]

**[我是南南741][user-64.png 8]** · 2018年12月24日

HI，楼主，有个疑问哈。  
“没有同源策略限制的接口请求”中cookie那个例子，难道如果没有同源策略，发送一个请求会带上所有的cookie的么？不应该是带上指定的domain下面的cookie么。

赞 回复

即使跨域cookie也不是随意获取的，只能是本域下的cookie。这个作者是不是应该讲清楚呢？有点让大家混淆

— [**小小志** ][Link 10]· 4月10日

添加回复

显示更多评论

![user-64.png][]

发布评论

[想在上方展示你的广告？][Link 11]

### 推广链接 ###

*  [要掌握跨域，首先要知道为什么会有跨域这个问题出现][Link 12]
 *  [没有同源策略限制的两大危险场景][Link 13]
 *   *  [没有同源策略限制的接口请求][Link 14]
     *  [没有同源策略限制的Dom查询][Dom]
 *  [跨域正确的打开方式][Link 15]
 *   *  [同源策略限制下接口请求的正确打开方式][Link 16]
     *  [同源策略限制下Dom查询的正确打开方式][Dom 1]
 *  [最后][Link 17]

[Link 1]: https://segmentfault.com/a/1190000015597029
[javascript]: https://segmentfault.com/t/javascript/blogs
[Link 2]: https://segmentfault.com/t/%E5%89%8D%E7%AB%AF/blogs
[Link 3]: https://segmentfault.com/t/%E8%B7%A8%E5%9F%9F/blogs
[this]: https://segmentfault.com/a/1190000015438195
[Link 4]: https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
[CSRF]: http://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html
[cookie]: https://segmentfault.com/a/1190000004556040#articleHeader6
[Cookie_Session]: https://harttle.land/2015/08/10/cookie-session.html
[Web_XSS]: https://www.cnblogs.com/TankXiao/archive/2012/03/21/2337194.html
[http_localhost]: http://localhost/
[CORS]: http://www.ruanyifeng.com/blog/2016/04/cors.html
[clipboard.png]: /images/20211218/e7ceeb267ead40439f1b330b1bdac464.png
[http_crossdomain.com]: http://crossdomain.com/
[clipboard.png 1]: /images/20211218/dc87525c2768443392ef545bd1f9fca0.png
[http_child.crossdomain.com]: http://child.crossdomain.com/
[canvas_getImageData_toDataURL]: https://www.zhangxinxu.com/wordpress/2018/02/crossorigin-canvas-getimagedata-cors/
[creativecommons-cc.svg]: /images/20211218/8edad00fc3654042aea1f9d7d6cc6d96.png
[creativecommons-cc.svg 1]: https://creativecommons.org/licenses/by-nc-nd/4.0/
[Link 5]: http://segmentfault.com/a/1190000013985405
[javascript 1]: https://segmentfault.com/t/javascript
[html]: https://segmentfault.com/t/html
[Nginx]: http://segmentfault.com/a/1190000015675331
[Link 6]: https://segmentfault.com/t/%E5%89%8D%E7%AB%AF
[ajax]: http://segmentfault.com/a/1190000011973662
[ajax 1]: https://segmentfault.com/t/ajax%E8%B7%A8%E5%9F%9F
[Link 7]: https://segmentfault.com/t/%E8%B7%A8%E5%9F%9F
[Link 8]: http://segmentfault.com/a/1190000014891342
[html5]: https://segmentfault.com/t/html5
[iframe_POST]: http://segmentfault.com/a/1190000007997430
[post]: https://segmentfault.com/t/post
[form]: https://segmentfault.com/t/form
[Link 9]: http://segmentfault.com/a/1190000012158485
[AJAX_ _ - JSONP _ CORS]: http://segmentfault.com/a/1190000012302319
[ajax 2]: https://segmentfault.com/t/ajax
[ajax 3]: http://segmentfault.com/a/1190000008577973
[941590541-5b44218814b6c_big64]: /images/20211218/a6749aeefc984a49addfb3674926da84.png
[941590541-5b44218814b6c_big64 1]: https://segmentfault.com/u/jingluo666
[Bug_]: https://segmentfault.com/u/t_co_b
[user-64.png]: /images/20211218/94e807a869d349c88966e1ad47addf84.png
[user-64.png 1]: https://segmentfault.com/u/dafeinang
[Shirley_]: https://segmentfault.com/u/shirley_5b432383b1c4a
[3849046299-5a0e70fee3e55_big64]: /images/20211218/e448a749621b498282b8a75776ed3a12.png
[3849046299-5a0e70fee3e55_big64 1]: https://segmentfault.com/u/xiejunhongjohn
[1548351972-5a8f8213c0c39_big64]: /images/20211218/d688be3b6a5444e48c22d99362acc0aa.png
[1548351972-5a8f8213c0c39_big64 1]: https://segmentfault.com/u/vbyzc
[weiwentao518_]: https://segmentfault.com/u/weiwentao518
[Love4Food_]: https://segmentfault.com/u/love4food
[451972963-5a67dff5c9e07_big64]: /images/20211218/e9232f85b0b64ed6a7130db05c7b6c9a.png
[451972963-5a67dff5c9e07_big64 1]: https://segmentfault.com/u/learnmeahaskell
[2871498483-5928e30f9350b_big64]: /images/20211218/58eb4c3a6c0043448ac2476a37f62d15.png
[2871498483-5928e30f9350b_big64 1]: https://segmentfault.com/u/yshtou
[2317264532-5b0f50362ce2b_big64]: /images/20211218/922c394703f0486eb71b4bd02ec0278e.png
[2317264532-5b0f50362ce2b_big64 1]: https://segmentfault.com/u/ssj_8551
[4073803245-5b73f4b05cf63_big64]: /images/20211218/25e8221c19fe4b3e8c418ea6142ead32.png
[4073803245-5b73f4b05cf63_big64 1]: https://segmentfault.com/u/zy2071
[867613156-5b2389d0319c2_big64]: /images/20211218/3020accda9624aa18d422a84b6f5160f.png
[867613156-5b2389d0319c2_big64 1]: https://segmentfault.com/u/victor_5abdd058d6c7c
[user-64.png 2]: https://segmentfault.com/u/xiaying
[2877019557-5abcb7cd5ef7a_big64]: /images/20211218/da217e4f5a394c58954d5cbcb22f6233.png
[2877019557-5abcb7cd5ef7a_big64 1]: https://segmentfault.com/u/xiaoyunling
[user-64.png 3]: https://segmentfault.com/u/jiaojiao_5a0575657f58a
[user-64.png 4]: https://segmentfault.com/u/dream610
[3858024892-5bd712baa40b8_big64]: /images/20211218/652cf0432cbb4f1fa719bc04881c1fa4.png
[3858024892-5bd712baa40b8_big64 1]: https://segmentfault.com/u/patrickstarcat
[user-64.png 5]: https://segmentfault.com/u/fightforfree
[user-64.png 6]: https://segmentfault.com/u/superking_5b9b1b73e6ad2
[214432261-582e9c80d4de5_big64]: /images/20211218/0268916595fd45618215261833ba4fa6.png
[214432261-582e9c80d4de5_big64 1]: https://segmentfault.com/u/woshiweijike
[4224779661-59842d027fed5_big64]: /images/20211218/69cecdb977af4f4fa4897dc41c909774.png
[4224779661-59842d027fed5_big64 1]: https://segmentfault.com/u/xiuqi
[user-64.png 7]: https://segmentfault.com/u/moon_5c151589a15a9
[user-64.png 8]: https://segmentfault.com/u/woshinannan741
[Link 10]: https://segmentfault.com/u/xiaoxiaozhi_5cadbfab1e3b8
[Link 11]: https://segmentfault.com/sponsor
[Link 12]: https://segmentfault.com/a/1190000015597029#articleHeader0
[Link 13]: https://segmentfault.com/a/1190000015597029#articleHeader1
[Link 14]: https://segmentfault.com/a/1190000015597029#articleHeader2
[Dom]: https://segmentfault.com/a/1190000015597029#articleHeader3
[Link 15]: https://segmentfault.com/a/1190000015597029#articleHeader4
[Link 16]: https://segmentfault.com/a/1190000015597029#articleHeader5
[Dom 1]: https://segmentfault.com/a/1190000015597029#articleHeader6
[Link 17]: https://segmentfault.com/a/1190000015597029#articleHeader7