九种跨域方案解决(偏后台)

清疚 2023-06-30 14:54 76阅读 0赞

同源策略：协议、域名和端口号都一致叫同域

为什么浏览器不支持跨域呢？

  • cookie localstorage等等不支持跨域
  • dom元素也有同源策略，比如iframe
  • ajax不支持跨越

实现跨域：

  • jsonp
  • cors
  • postMessage
  • document.domain
  • window.name
  • location.hash
  • http-proxy
  • nginx
  • websocket

1 jsonp

  1. <script type="text/javascript">
  2.             //1jsonp
  3.             // 缺点：只能发送get请求，不支持post put delete，不安全
  4.             function jsonp({url,params,cb}){
  5.                 return new Promise((resolve,reject)=>{
  6.                     window[cb]=function(data){
  7.                         resolve(data);
  8.                         document.body.remove(script);
  9.                     }
  10.                     params={...params,cb}
  11.                     let arrs=[];
  12.                     for(let key in params){
  13.                         arrs.push(`${key}=${params[key]}`)
  14.                     }
  15.                     let script=document.createElement('script');
  16.                     script.src=`${url}?${arrs.join('&')}`;
  17.                     document.body.appendChild(script);
  18.                 })
  19.             }
  20.             jsonp({
  21.                 url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
  22.                 params:{
  23.                     wd:'b'
  24.                 },
  25.                 cb:'show'
  26.             })
  27.             .then(res=>{
  28.                 console.log(res)
  29.             })
  30.             .catch(err=>{
  31.                 console.log(err)
  32.             })
  33.         </script>

#

2 cors

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //2cors
  10.             let xhr=new XMLHttpRequest;
  11.             document.cookie="name=afpx";
  12.             // 强制带好凭证再发送请求
  13.             xhr.withCredentials=true;
  14.             xhr.open('PUT','http://localhost:4000/getData',true);
  15.             xhr.setRequestHeader('name','afpx')
  16.             xhr.onreadystatechange=function(){
  17.                 if(xhr.readyState==4){
  18.                     if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
  19.                         console.log(xhr.response)
  20.                     }
  21.                 }
  22.             }
  23.             xhr.send();
  24.         </script>
  25.     </body>
  26. </html>

server.js

  1. let express=require('express');
  2. let app=express();
  4. app.use(express.static(__dirname));
  5. app.listen(3000);

server2.js

  1. let express=require('express');
  2. let app=express();
  3. let whiteList=['http://localhost:3000']
  4. app.use(function(req,res,next){
  5.     let origin=req.headers.origin;
  6.     if(whiteList.includes(origin)){
  7.         // 设置哪个源可以访问
  8.         res.setHeader('Access-Control-Allow-Origin',origin)
  9.         // 设置加请求头
  10.         res.setHeader('Access-Control-Allow-Headers','name')
  11.         // 添加请求方法
  12.         res.setHeader('Access-Control-Allow-Methods','PUT')
  13.         // 预检的存活时间
  14.         res.setHeader('Access-Control-Max-Age',6000)
  15.                // 允许前端获取哪个头
  16.         res.setHeader('Access-Control-Expose-Headers','name')
  17.         if(req.method=='OPTIONS'){
  18.             res.end();//OPTIONS请求不做任何处理
  19.         }
  20.     }
  21.     next();
  22. })
  23. app.get('/getData',function(req,res){
  24.     console.log(req.headers);
  25.     res.end('hahaha')
  26. })
  27. app.put('/getData',function(req,res){
  28.     console.log(req.headers);
  29.     res.end('hahaha')
  30. })
  31. app.use(express.static(__dirname));
  32. app.listen(4000);

#

3 postMessage

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <iframe 
  9.           src="http://localhost:4000/index2.html"
  10.           id="iframe"
  11.           onload="load()">
  12.         </iframe>
  13.         <script type="text/javascript">
  14.             //3
  15.             function load(){
  16.                 let frame=document.getElementById('iframe');
  17.                 frame.contentWindow.postMessage('我爱你','http://localhost:4000')
  18.                 window.onmessage=function(e){
  19.                     console.log(e.data)
  20.                 }
  21.             }
  22.         </script>
  23.     </body>
  24. </html>

index2.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             window.onmessage=function(e){
  10.                 console.log(e.data)
  11.                 e.source.postMessage('我不爱你',e.origin);
  12.             }
  13.         </script>
  14.     </body>
  15. </html>

server.js

  1. let express=require('express');
  2. let app=express();
  4. app.use(express.static(__dirname));
  5. app.listen(3000);

server2.js

  1. let express=require('express');
  2. let app=express();
  4. app.use(express.static(__dirname));
  5. app.listen(4000);

#

4 window.name

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <!-- index和index2是同域的,http://localhost:3000
  9.         index3是独立的,http://localhost:4000
  10.         index获取index3的数据    
  11.         index先引用index3 index3把值放到window.name 把index引用的地址改到index2 -->
  12.         <iframe 
  13.           src="http://localhost:4000/index3.html"
  14.           id="iframe"
  15.           onload="load()">
  16.         </iframe>
  17.         <script type="text/javascript">
  18.             let first=true;
  19.             function load(){
  20.                 if(first){
  21.                     let iframe=document.getElementById('iframe');
  22.                     iframe.src="http://localhost:3000/index2.html"
  23.                     first=false;
  24.                 }else{
  25.                     console.log(iframe.contentWindow.name)
  26.                 }
  28.             }
  29.         </script>
  30.     </body>
  31. </html>

index2.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  10.         </script>
  11.     </body>
  12. </html>

index3.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.             window.name="我不爱你"
  10.         </script>
  11.     </body>
  12. </html>

server.js

  1. let express=require('express');
  2. let app=express();
  4. app.use(express.static(__dirname));
  5. app.listen(3000);

server2.js

  1. let express=require('express');
  2. let app=express();
  4. app.use(express.static(__dirname));
  5. app.listen(4000);

5 location.hash

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <!-- 路径后面的hash值可以用来通信 -->
  9.         <!-- 目的：index想访问index3
  10.         index给index3传一个hash值，
  11.         index3收到hash值后
  12.         index3把hash值传递给index2
  13.         index2将结果放到index的hash值中 -->
  14.         <iframe 
  15.           src="http://localhost:4000/index3.html#iloveyou"
  16.           id="iframe">
  17.         </iframe>
  18.         <script type="text/javascript">
  19.             window.onhashchange=function(){
  20.                 console.log(location.hash)
  21.             }
  22.         </script>
  23.     </body>
  24. </html>

index2.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             window.parent.parent.location.hash=location.hash;
  10.         </script>
  11.     </body>
  12. </html>

index3.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.             console.log(window.location.hash)
  10.             let iframe=document.createElement('iframe');
  11.             iframe.src="http://localhost:3000/index2.html#idontloveyou"
  12.             document.body.appendChild(iframe);
  13.         </script>
  14.     </body>
  15. </html>

6 document.domain

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         helloa
  9.         <!-- 限制：必须是一级域名和二级域名的关系，并且配置 -->
  10.         <!-- 一级域名 www.baidu.com -->
  11.         <!-- 二级域名 viode.baidu.com -->
  12.         <!-- index是通过http://localhost:3000/index.html -->
  13.         <iframe 
  14.           src="http://localhost:3000/index2.html"
  15.           id="iframe"
  16.           onload="load()">
  17.         </iframe>
  18.         <script type="text/javascript">
  19.             document.domain="zf1.cn"
  20.             function load(){
  21.                 var iframe=document.getElementById('iframe')
  22.                 console.log(iframe.contentWindow.a);
  23.             }
  24.         </script>
  25.     </body>
  26. </html>

index2.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         hellob
  9.         <script type="text/javascript">
  10.             document.domain="zf1.cn"
  11.             var a=100;
  12.         </script>
  13.     </body>
  14. </html>

7 websocket

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             // 高级api 不兼容 socket.io(一般使用它)
  10.             let socket=new WebSocket('ws://localhost:3000');
  11.             socket.onopen=function(){
  12.                 socket.send('我爱你');
  13.             }
  14.             socket.onmessage=function(e){
  15.                 console.log(e)
  16.             }
  17.         </script>
  18.     </body>
  19. </html>

server.js

  1. let express=require('express');
  2. let app=express();
  3. let WebSocket=require('ws');
  4. let wss=new WebSocket.Server({port:3000});
  5. wss.on('connection',function(ws){
  6.     ws.on('message',function(data){
  7.         console.log(data)
  8.         ws.send('我不爱你')
  9.     })
  10. });

8 nginx

先下载nginx，然后配置

9 http-proxy

以后再学

发表评论

表情：
评论列表 （有 0 条评论，76人围观）

还没有评论，来说两句吧...

相关阅读

    相关 跨域9种解决方案

    什么是跨域 说起跨域，就要知道什么是浏览器同源策略 浏览器同源策略：必须是协议、域名、端口完全一致的才符合同源策略 如果以上三项，有一项不同都涉及到跨域问题 ---

    谁践踏了优雅谁践踏了优雅/ 0 赞/ 109 阅读

    相关 前端解决跨域的九种方法

    什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1、`资源跳转：A链接、重定向、表单提交` `2、资源嵌入：

    Bertha 。Bertha 。/ 0 赞/ 81 阅读

    相关 解决跨域的九种方式

    前端解决跨域的九种方法 什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 广义的跨域： 1、资源跳转：A链接、重定向、表单提

    小灰灰小灰灰/ 0 赞/ 379 阅读