前端跨域的几种方法

最新推荐文章于 2023-05-29 16:44:33 发布

前端giao仔

最新推荐文章于 2023-05-29 16:44:33 发布

阅读量344

点赞数

分类专栏：浏览器跨域文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/dusehngcsdn/article/details/125471032

版权

浏览器同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

跨域

1 篇文章 0 订阅

订阅专栏

什么是跨域, 这边不做介绍

1.jsonp

这种方法是浏览器会借助script这个标签去访问其他服务器的资源, 达到传参的目的, 因为浏览器的script标签路径不会做拦截和校验. 一般前端会定义参数和回调函数, 然后组装到url上作为script.src, src指向的服务器会做处理, 执行回调函数并传值

// http://localhost:9990/jsonp.js
foo({ a: 1221 });
document.body.style.backgroundColor = "red";

<!-- http://localhost:8888/test.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>

  <script>
    const foo = function (params) {
      alert(params);
    };
  </script>
  <script src="http://localhost:9990/jsonp.js"></script>
</html>

这样test.html中的就会alert({ a: 1221 })了, 这样就达到了跨域传参的效果, 也就是8888端口访问9990端口, 但是jsonp也可能造成xss攻击, 如果这个接口被别人, 也这样去用, 会导致本该信息泄露

2.cors

这个其实就是后端去处理了, 反正就是放开对服务器地址的访问, 不同域名也可以访问我, 比如那种完全放开的api就是这样, 对前端的访问不做限制

3.iframe + postMessage

比如a网站想和b网站做交互, 如何去实现呢, 可以用postMessage, a网站post 一个message, b网站进行一个监听, 然后处理a网站传输过来的值即可

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>我是a网站(http://localhost:999)</title>
  </head>

  <body>
    <div>
      <input id="text" type="text" value="Runoob" />
      <button id="sendMessage"></button>
    </div>
    <iframe
      id="receiver"
      src="http://127.0.0.1:5500/aaa.html"
      width="300"
      height="360"
    >
      <p>你的浏览器不支持 iframe</p>
    </iframe>
    <script>
      window.onload = function () {
        var receiver = document.getElementById("receiver").contentWindow;
        var btn = document.getElementById("sendMessage");
        btn.addEventListener("click", function (e) {
          e.preventDefault();
          var val = document.getElementById("text").value;
          receiver.postMessage(
            "Hello " + val + "！",
            "http://127.0.0.1:5500/aaa.html"
          );
        });
      };
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我是b网站(http://127.0.0.1:5500/aaa.htm)</title>
    <style>
      body {
        background-color: red;
        width: 900px;
        height: 400px;
      }
    </style>
  </head>

  <body>
    <div id="recMessage"></div>
    <script>
      window.onload = function () {
        var messageEle = document.getElementById("recMessage");
        window.addEventListener("message", function (e) {
          // 监听 message 事件

          // alert(e.origin);
          if (e.origin !== "http://localhost:9991") {
            // 验证消息来源地址
            return;
          }
          messageEle.innerHTML = "从" + e.origin + "收到消息： " + e.data;
        });
      };
    </script>
  </body>
</html>

4. webpack 或者 nginx

其实这种我个人在本地开发用的比较多, 前后端分离的项目, 如果想访问后端的接口地址, 经常会碰到跨域的问题, 工程化的项目在wepack.config.js 或者 vue.config.js中的devServer.proxy配置一下后端地址即可

proxy:{
            //一旦devServer5000接到/api/xxx的请求，就会把请求转发到另一个服务器3000
            '/api':{
                //转发后的目标地址
                // target: project_config.proxyAddr,
                target:'localhost:3000',
                // 发送请求时，请求路径重写 /api/xxx ->  /xxx （去掉a/pi）
                pathRewrite: {
                    '^/api': ''
                }
            }
        }

但是比较小的项目怎么办, 类似jquery + layui这种, 根本用不上脚手架什么的, 可以用在本地下载一个nginx, 启动nginx.exe, 然后修改一下nginx.conf, 再nginx.exe -s reload即可, 例如以下配置会导致访问localhost: 9991/api/getUser => http://xxxxx.cn:8085/api/getUser, 达到跨域的目的

    server {
        listen       9991; // 本地开发端口, 可以开好多
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   C:\Users\xxxx\Desktop\demo; // 本地开发文件夹
            index  index.html  index.htm;
        }

        location /api { // 所有接口中带api的都会指向http://xxxxx.cn:8085/api
            
            proxy_pass http://xxxxx.cn:8085/api; 

        }
     }