跨域

定义：它是浏览器的一种安全机制--行为

跨域是指请求源和目标有：协议，IP(域名),端口有一个不一样就是跨域，没有跨域就是同源

跨域并不是服务器没有响应，而只是浏览阻止用户接收数据

（1）服务器端跨域（CORS）

               在服务器设置允许跨域的配置   

app.all("*", function (req, res, next) {
    //设置允许跨域的域名，*代表允许任意域名跨域
    // 下面这句话就是配置我允许谁向我发起跨域请求,意思就是告诉浏览器你得将数据给请求者
    // *代表所有源
    // res.header("Access-Control-Allow-Origin","http://127.0.0.1:5500");
    res.header("Access-Control-Allow-Origin", "*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers", "content-type");
    //跨域允许的请求方式 
    res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
    // 下面这个是为了解决在vue中发送跨域请求会请求两次
    if (req.method.toLowerCase() == 'options')
        res.send(200);  //让options尝试请求快速结束
    else
        next();
})

（2）客户端跨域(JSONP)

• 在客户端设置可以实现跨域请求

• 客户端跨域需要服务器端的配合

• 你跨域的目的是：是获取数据，并且对数据进行相应的处理

• jsonp实现原理：

  • ajax的跨域请求和异步对象没有任何的关系

  • 跨域的本质是利于用了script标签的src属性的天然跨域特点，通过Script标签获取的返回值默认会以js语法解析，但是从来没有人规定过，script标签中的src只能向js文件发起请求

  • 我们在使用script标签发起跨域请求的时候，传递一个函数名称到服务器，从服务器返回一个当前函数调用形式字符串，在函数中拼接数据

  • jsonp跨域只能是get方式

示例：

前台页

 

<script>
     function test(result){
         console.log(result)
     }
</script>
<script src="http://127.0.0.1:3003/getList?callback=test"></script>复制代码

后台服务器

var express = require('express')
var app = express()
var myurl = require('url')
var fs = require('fs')


app.listen('3003', () => {
    console.log('http://127.0.0.1:3003')
})

// 添加路由
app.get('/getlist',(req,res) => {
    var test = myurl.parse(req.url,true).query.callback
    // console.log(fn)
    // var name = 'jack'
    // res.end(`alert('${name}')`)
    fs.readFile(__dirname+"/data.json",'utf-8',(err,data) =>　{
        if(err){
            res.end(test+`(${err})`)
        }else{
            res.end(test+`(${data})`)
        }
    })
})

服务器禁止跨域（window.name）

window.name这个属性不是一个简单的全局属性 --- 只要在一个window下，无论url怎么变化，只要设置好了window.name，那么后续就一直都不会改变，同理，在iframe中，即使url在变化，iframe中的window.name也是一个固定的值，利用这个，我们就可以实现跨域了

 

转载于:https://my.oschina.net/u/4155188/blog/3067165