跨域

• proxy
• jsonp
• cros

  什么是跨域?

  出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

同源策略

URL是什么?

URL是统一资源定位符

URL的组成

• ·协议http | https | files
• ·域名

。 顶级域名http://www.citicbank.com/
。二级域名

• • https://etrade.citicbank.com
• • https://iciticbank.com/etrade/
  • ·端口80
  • 地址

为什么会有同源策略:浏览器为了保护服务器，出台了《同源第略》
客户端在请求服务端时如果协议、域名、端口号都相同才可以访问服务器的数据

-协议不同:http://zillocalhost.3000/a | https://localhost:3000/b | files://C:/UserlNan/a
-域名不同:http://127.0.0.1:3000a http://192.168.1.1/b

JSONP跨域

由于同源策略的限制，非同源的客户端不能访问服务端的内容，但是带有src属性的标签不受同源策略的
限制，从而利用这个bug来实现跨域

<script>
    function f(data) {
        console.log(data);
    }
</script>
<script src='http://127.0.0.1:8080/api?callback=f'></script>

// JSONP
app2.get("/api", (req, res) => {
  let funcname = req.query.callback;
  res.send(funcname + "('你好')");
});

cros 服务器跨域

1、express/app.js
app.get('/app',(req,res) => {
    /**
     * Access-Control-Allow-Origin 可跨域的域名 -CORS
     * 
     */
  res.writeHead(200,{
      "Access-Control-Allow-Origin":"*"
  })
  res.end(JSON.stringify({
    code:1,
    msg:'app'
  }))
})

import axios from 'axios'
        //cros 服务器跨域 express 的端口号
        const url = "http://localhost:3000/app";
        axios.get(url).then((res) => {
            console.log(res)
        }).catch((error) => {
            console.log(error)
})