当前位置：网站首页>What is cross domain? How to solve the cross domain problem?

What is cross domain? How to solve the cross domain problem?

2022-07-28 09:29:00 【Front end program】

List of articles

Tips： Write Vue Too many projects , Proxy server has been used for cross domain . Today in review node When , It also summarizes the back-end methods to solve browser cross domain

List of articles

List of articles
One 、 What is cross-domain ？
Two 、Vue The proxy server resolves requests across domains
3、 ... and 、 Tools to solve cross domain
- 1. Use CORS Everywhere Tools for cross domain
Four 、Node Solving cross domain problems
5、 ... and 、HTML Label or Jquery To solve the cross domain （jsonp Cross domain ）
summary

One 、 What is cross-domain ？

1. Introduction to the cross domain and homology strategy of the browser

Cross domain , It means that the browser can't execute scripts of other websites . Cross domain is caused by the same origin policy of the browser , Security restrictions imposed by the browser .

Homology strategy refers to , agreement , domain name , If the ports are different, the same origin policy will be triggered , There's a cross domain problem . Please note that ：localhost and 127.0.0.1 Although they all point to this machine , But it's also cross domain .
Browser execution javascript Script time , Check which page the script belongs to , If it's not the same source page , Will not be implemented .

2. The emergence of cross domain in Firefox （ Here's the picture ）

Insert picture description here

3. The emergence of cross domain in Google （ Here's the picture ）

Insert picture description here

Two 、Vue The proxy server resolves requests across domains

Vue For cross domain solutions, click here Proxy server solves cross domain

3、 ... and 、 Tools to solve cross domain

1. Use CORS Everywhere Tools for cross domain

Tips： This tool has certain limitations , We need to use Installation of Firefox browser CORS Everywhere , But it's super convenient ！！！！

Four 、Node Solving cross domain problems

1. Use cors To solve the cross domain （ temporary 3 Methods , It will be updated ）

Bear in mind ： Do not install here as cros I installed it wrong at the beginning （cors and cros The two brothers look alike , It's mainly a mistake ）

install ：npm i cors -S

// The first cross domain approach ： Import cros 
 var cors =require('cors')
 app.use(cors())

2. Set up Access-Control-Allow-Origin To solve the cross domain （ Single interface ）

 // The second cross domain approach ： Set the corresponding header 
    res.setHeader("Access-Control-Allow-Origin", "*")

3. Configure middleware to solve cross domain （ overall situation ）

// The third cross domain solution 
 app.use((req,res,next)=>{
    
  res.setHeader("Access-Control-Allow-Origin", "*")
   next()
 })

4.Node Solve cross domain complete code （ as follows ）

1.Node Code

// Import express
var express =require('express')
// register app 

const app =express()
// Static folder registration 
// app.use(express.static("www"))

// The first cross domain approach ： Import cros 
// var cors =require('cors')
// app.use(cors())


// The second cross domain solution 
// app.use((req,res,next)=>{
    
// res.setHeader("Access-Control-Allow-Origin", "*")
// next()
// })

app.get("/lo",(req,res)=>{
    
    // The third cross domain approach ： Set the corresponding header 
    res.setHeader("Access-Control-Allow-Origin", "*")
    res.send("<h1>1231313</h1>")
})
app.get("/low",(req,res)=>{
    
    res.send("<h1>188999798789789</h1>")
})

app.listen(3000,()=>{
    
    console.log("Serve Is Running ！！！");
})

2.Html Code for

<!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>
    <div>Text</div>
</body>
<script>
   fetch('http://localhost:3000/lo').then(res=>{
    
       console.log(res);
   })
   fetch('http://localhost:3000/low').then(res=>{
    
       console.log(res);
   })
</script>
</html>

5、 ... and 、HTML Label or Jquery To solve the cross domain （jsonp Cross domain ）

This cross domain writing method has been basically eliminated for a long time , It is not recommended to use , If you want to know , You can click the link below ️

Introduce jsonp Cross domain requested link

The main principle here is HTML In the tag src and href attribute , There will be no cross domain

 <a></a>  and <script></script>

summary

All in all ： This article introduces a variety of solutions that can solve cross domain problems , The following updates will continue in React The proxy server in solves cross domain requests , Thank you for reading it patiently . I wish you all more and more skilled ！！！！！！

原网站

版权声明
本文为[Front end program]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/209/202207280849557287.html