当前位置：网站首页>What is cross domain and how to solve cross domain problems

What is cross domain and how to solve cross domain problems

2022-04-21 08:06:00 【Fish that want to be taken away】

Cross domain

Concept

Cross domain , It means that the browser can't execute scripts of other websites . It is from The same source strategy for browsers Caused by the , yes Browser imposed Security restrictions .

The so-called homology , Domain name (IP)、 agreement (http：80/https：443)、 port (8080) All the same

ajax Cross domain access is not allowed , Can only be accessed in the same domain .

How to solve cross domain

One ：CORS

Allow cross domain access ( The most simple ), Add a response header on the server side （ Allow cross domain operations ）

The server tells the browser that the response header can be set across domains

// Set the response header , To be in app.use('/', indexRouter); In front of the 
app.use('/*',function(req,res,next){
    
  res.setHeader("Access-Control-Allow-Origin","*");
  res.setHeader("Access-Control-Allow-Headers", "X-Requested-With,Origin,Content-Type,Accept"); //  Header information supported by the server 
  res.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); //  Permitted methods  
  next();
})

operation ：

<body>
    <h1> page 1</h1>
    <button id="btn"> Click on </button>
    <!-- <img src="http://localhost:3003/images/12.jpg" alt=""> -->
    <script src="./layui/layui.js"></script>
    <script>
        layui.define(function () {
    
            let {
    $} = layui;
            $("#btn").click(function(){
    
                $.ajax({
    
                    type:"get",
                    url:"http://localhost:3003/users",
                    success(res){
    
                        console.log(res);
                    }
                })
            })
        })
    </script>
</body>

Two ： proxy server

Most used , Configure agent

Written in app.js Inside , Write that the server accessed by the browser acts as a proxy server to access other servers

With express plug-in unit , Download plug-ins ：npm i http-proxy-middleware

1. introduce

// Introduce and create middleware 
const {
    createProxyMiddleware } = require('http-proxy-middleware');

2. Configure agent

notes ： Put it on var app = express(); front

//  Configure agent 
const restream = function(proxyReq, req, res, options) {
    
  if (req.body) {
    
      let bodyData = JSON.stringify(req.body);
      // incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
      proxyReq.setHeader('Content-Type','application/json');
      proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
      // stream the content
      proxyReq.write(bodyData);
  }
}
const options = {
    
  target: 'http://localhost:3003',  //  Target server's  host
  changeOrigin: true,               //  Default  false, Whether the original host header needs to be changed as the target  URL
  pathRewrite: {
                        //  Rewrite request 
    '^/api': '/',                   //  All with  "/api"  Initial request ,"/api"  Will be rewritten as  "/"
  },
  onProxyReq:restream
}

3. Write routing

//  Set the route to access the agent , This line of code must be written in  var app = express();  after 
app.use('/api', createProxyMiddleware(options));

4. call ajax

$.ajax({
    
        type:"get",
        url:"/api/users",
        success(res){
    
        console.log(res);
        }
})

5. Acting 3003 The server

// proxy server 
router.get('/', function(req, res, next) {
    
  res.send('respond  resources 222');
});

3、 ... and ：JSONP

During the interview ：（ The most asked , Use the least ）

JSONP No ajax So there's no cross domain problem ,

JSONP:(JSON with padding)

Browser pass spcrit The tag initiates a request to the server ,

// Browser pass spcrit The tag initiates a request to the server  
<script src="http://localhost:3003/users"></script>

//ajax It uses jsonp Method 
$.ajax({
      
            type:"get",
            url:"http://localhost:3003/users",
            dataType:"jsonp",   // data type 
            jsonpCallback:"callback",   // The last name 
            success(res){
      
            console.log(res);
            }
 })

The server wraps the returned message with an executable function ,

// Out-of-service post Method , Only use get Method 
router.get('/', function(req, res, next) {
      
  res.send('callback("respond  resources 111")');
});

The browser executes this function after receiving the message returned by the server , To get the data inside

// Execute first and then reference  
<script>
        function callback(res){
      
            console.log(res);
        }
  </script>

shortcoming ：

Only use get Submit , You can't add, delete, modify or check

版权声明
本文为[Fish that want to be taken away]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204210712347550.html