跨域问题的三种方法

  jsonp

  1. 前端写法  

          <body>

  <button id="btn">按钮</button>

  <script type="text/javascript">

    var btn = document.getElementById('btn');

    btn.onclick = function () {

      //1. 创建一个script标签

      var script = document.createElement('script');

      //2. 设置回调函数

      window.getData = function (data) {

        console.log(data);//拿到数据

      }

      //3. 设置script标签src属性，填写跨域请求的地址

      script.src = 'http://localhost:3000/jsonp?callback=getData';

      //4. 将script标签添加到body中生效

      document.body.appendChild(script);

      //5.不影响整体DOM结构，删除script标签

      document.body.removeChild(script);

    }

  </script>

</body>

  1. 后端写法

        app.get('/jsonp', (req, res) => {

       //解构赋值获取请求参数

       const {callback} = req.query

      //去数据库查找对应数据

      const data = [{name: 'tom', age: 18}, {name: 'jerry', age: 20}];

      res.send(callback + '(' + JSON.stringify(data) + ')');

})

cors解决跨域

res.set('Access-Control-Allow-Origin', 'http://localhost:63342');//存在安全问题

vue使用代理工具，webpack devserver 

posted @ 2020-03-12 14:54  小北,,,,小南  阅读(102)  评论(0)    收藏  举报