解决跨域问题

最新推荐文章于 2022-12-22 20:45:35 发布

Meta_moke

最新推荐文章于 2022-12-22 20:45:35 发布

阅读量210

点赞数

本文链接：https://blog.csdn.net/AngelTp/article/details/115886632

版权

解决跨域的十种方案

跨域原因：网络请求时，协议，IP地址，域名其中的一个于源目标地址有不同的时候出现跨域问题解决跨域的方法：

　　注意：1.如果是协议和端口造成的跨域问题，前端无法处理；

　　　　　2.是否跨域，仅仅通过URL的首部来判断，不会通过域名对应的IP地址是否相同来判断；

　　　　　3.跨域并不是请求发不出去，而是请求发出去了，也正常返回结果了，但是结果被浏览器拦截了。

方案一

JSONP来解决跨域
- 注意:支持GET请求,一定要浏览器支持才可以
- JSONP是非同源策略，AJAX属于同源策略。

利用script标签没有跨域的限制，网页可以从其他来源动态的获取JSON数据，从而实现跨域。

创建JSONP 的原理及步骤
①创建script
	let script =document.createElement("script");
②设置src属性
	script.src="url地址";
③把创建好的标签插入到body中
	document.body.appendChild(script)
④回调函数
	function callback(res){
//res就是调取jsonp之后的响应
}
注意:什么是JSONP的接口
	?后面以cb或者callback为第一个参数的就是jsonp接口

方案二

利用H5的websocket协议，实现浏览器与服务器的即时通信，同时允许跨域通讯
- 服务器代理

// socket.html
<script>
    let socket = new WebSocket('ws://localhost:3000');
    socket.onopen = function () {
      socket.send('我爱你');//向服务器发送数据
    }
    socket.onmessage = function (e) {
      console.log(e.data);//接收服务器返回的数据
    }
</script>
// server.js
let express = require('express');
let app = express();
let WebSocket = require('ws');//记得安装ws
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {
  ws.on('message', function (data) {
    console.log(data);
    ws.send('我不爱你')
  });
})

方案三

webpack proxy
- 代理服务器

//服务器启动目录;
  devServer: {
    contentBase: './dist',
    hot: true,
    // host:'1ocalhost',
    port: 8586,
    // compress:true,

    //解决跨域
    proxy: {
      '/api': {
        target: 'http://localhost:8087',
        pathRewrite: { '^/api': '' },
        changeOrigin: true,
        secure: false, // 接受 运行在 https 上的服务
      }
    }
  },

方案四

CORS(Cross-Origin Resource Sharing)技术
- 需要前后端同时支持

前端浏览器在IE9以上，后端在响应报头添加Access-Control-Allow-Origin标签，从而允许指定域的站点访问当前域上的资源。

res.setHeader("Access-Control-Allow-Origin","*");
不过CORS默认只支持GET/POST这两种http请求类型，如果要开启PUT/DELETE之类的方式，需要在服务端在添加一个"Access-Control-Allow-Methods"报头标签。

方案五

利用H5的postMessage 方法和 onmessage 事件解决跨域问题
- 可实现多窗口之间的数据传递
postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

方案六

window.name
- window.name 属性的独特之处：name 值在不同的页面(甚至不同域名)加载后依旧存在，并且可以支持非常长的 name 值(2MB)。
- a、b页面同域，a页面嵌套c页面，onload事件第一次载入c页面url变为b页面并且获取contentWindow.name

// a.html(http://localhost:3000/b.html)
  <iframe src="http://localhost:4000/c.html" frameborder="0" onload="load()" id="iframe"></iframe>
  <script>
    let first = true
    // onload事件会触发2次，第1次加载跨域页，并留存数据于window.name
    function load() {
      if(first){
      // 第1次onload(跨域页)成功后，切换到同域代理页面
        let iframe = document.getElementById('iframe');
        iframe.src = 'http://localhost:3000/b.html';
        first = false;
      }else{
      // 第2次onload(同域b.html页)成功后，读取同域window.name中数据
        console.log(iframe.contentWindow.name);
      }
    }
  </script>

// c.html(http://localhost:4000/c.html)
  <script>
    window.name = '我不爱你'
  </script>

方案七

hash
- a中嵌套c，c中嵌套b，a=>b=>c传递location.hash，a页面用window.onhashchange获取hash值

// a.html
  <iframe src="http://localhost:4000/c.html#iloveyou"></iframe>
  <script>
    window.onhashchange = function () { //检测hash的变化
      console.log(location.hash);
    }
  </script>
 // b.html
  <script>
    window.parent.parent.location.hash = location.hash
    //b.html将结果放到a.html的hash值中，b.html可通过parent.parent访问a.html页面
  </script>
 // c.html
 console.log(location.hash);
  let iframe = document.createElement('iframe');
  iframe.src = 'http://localhost:3000/b.html#idontloveyou';
  document.body.appendChild(iframe);

方案八

document.domain
- 必须是一级域名和二级域名的关系

// a.html
<body>
 helloa
  <iframe src="http://b.zf1.cn:3000/b.html" frameborder="0" onload="load()" id="frame"></iframe>
  <script>
    document.domain = 'zf1.cn'
    function load() {
      console.log(frame.contentWindow.a);
    }
  </script>
</body>
// b.html
<body>
   hellob
   <script>
     document.domain = 'zf1.cn'
     var a = 100;
   </script>
</body>

方案九

nginx
- 实现原理类似于 Node 中间件代理，需要你搭建一个中转 nginx 服务器，用于转发请求。

使用 nginx 反向代理实现跨域，是最简单的跨域方式。只需要修改 nginx 的配置即可解决跨域问题，支持所有浏览器，支持 session，不需要修改任何代码，并且不会影响服务器性能。

实现思路：通过 nginx 配置一个代理服务器(域名与 domain1 相同，端口不同)做跳板机，反向代理访问 domain2 接口，并且可以顺便修改 cookie 中 domain 信息，方便当前域 cookie 写入，实现跨域登录。

先下载nginx，然后将 nginx 目录下的 nginx.conf 修改如下:

// proxy服务器
server {
    listen       80;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

方案十

webpack proxy

//服务器启动目录;
  devServer: {
    contentBase: './dist',
    hot: true,
    // host:'1ocalhost',
    port: 8586,
    // compress:true,

    //解决跨域
    proxy: {
      '/api': {
        target: 'http://localhost:8087',
        pathRewrite: { '^/api': '' },
        changeOrigin: true,
        secure: false, // 接受 运行在 https 上的服务
      }
    }
  },

Meta_moke

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
解决跨域问题

解决跨域的十种方案跨域原因：网络请求时，协议，IP地址，域名其中的一个于源目标地址有不同的时候出现跨域问题解决跨域的方法：　　注意：1.如果是协议和端口造成的跨域问题，前端无法处理；　　　　　2.是否跨域，仅仅通过URL的首部来判断，不会通过域名对应的IP地址是否相同来判断；　　　　　3.跨域并不是请求发不出去，而是请求发出去了，也正常返回结果了，但是结果被浏览器拦截了。方案一J...
复制链接

扫一扫