1-3 跨域

1 什么是域和跨域

什么是域：chengdong.com
https://www.taobao.com:80
https:协议
www:子域名
taobao.com:主域名
80:端口
域名：由协议、子域名、主域名、端口号组成，这四个组成部分只要有一个不一样，就叫做不同的域

2、不同的域

这两个域就是不同的域，因为其端口号不同
http://47.108.197.28:3000/
http://47.108.197.28:4000/

http://aaa.baidu,com
http://bbb.baidu.com
http://music.baidu.com
当买了主域名之后，子域名是可以自己定义的，子域名不同，所以这里也是不同的域

3、同源和同源策略

js出于同源策略的限制，不允许从一个域访问另一个域 
同源：同一个域
什么是同源策略：就是js只允许同一个域之间相互访问

、如何实现跨域

4-1 服务器端实现跨域

koa.js中
ctx.set("Access-Control-Allow-Origin","*")

4-2 客户端实现跨域

4-2-1 使用jsonp去跨域

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

# html 
$.ajax({
   url:'http://localhost:8080',
   dataType:"jsonp",
   method:"get",
   success:res=>{
     console.log(res);
   }
 })
# js
const koa = require("koa")
const app = new koa()
app.use(async ctx=>{
    let callbackName = ctx.query.callback || 'callback'
    // 返回jsonp
    var obj ={
      name:"cheng",
      age:18
    }
    ctx.body = callbackName + `(${JSON.stringify(obj)})`
})
app.listen(8080,()=>{
    console.log('服务器打开了');
})

4-2-2 script

script 不收同源策略的限制

var script = document.createElement("script");
script.src = "http://localhost:8080?&callback=handleResponse";
document.body.prepend(script);
function handleResponse(res) {
  // 对response数据进行操作代码
  console.log(res)
}

4-2-3 中间件函数

因为每一个路由到下一个路由都会经过中间件函数，所以在中间件函数中设置了请求头，那么每一个路由就都有了请求头
app.use(async (ctx,next)=>{
    ctx.set("Access-Control-Allow-Origin","*")
    await next()
})

方法3

 <script>
        $.ajax({
            url:"https://apis.map.qq.com/ws/location/v1/ip?key=7HQBZ-VO33U-SDWVK-BYWTK-TSJUZ-PLBDS&output=jsonp",
            dataType:"jsonp",
            success:res=>{
                console.log(res);
            }
        })
    </script>
&output=json加上去