First, what is cross-domain

Cross-domain is caused by the same origin policy of the browser to prevent the browser from executing scripts from other sites. The same protocol, domain name, and port number must be the same.

Second, cross-domain solutions

Here we use Node to demonstrate. First we create two simple Node services that run locally on port 90 and port 91. What we need to do is to send a request to the port 91 page for port 90 data.

var express = require('express')

// Port 90 service
var app1 = express()
app1.get('/' , (req,res) = > {
    res.send('Hello port 91')
})
app1.listen(90)


// The service of port 91
var app2 = express()
app2.use(express.static(__dirname))
app2.listen(91)
Copy the code

First, what happens if we use the fetch function directly to fetch port 91 data in a 90-end page like the following?

<body>
    <script>
        fetch('http://localhost: 90/').then(function (data) {
            return data.text()
        }).then(function (data){
            alert(data)
        })
    </script>
</body>
Copy the code

Yes, it was an error

1, the json

Since 

<body>
    <script>
        function f(data) {
            console.log(data)
        }
    </script>
<script src='http://localhost: 90? callback=f'></script>
</body>
Copy the code
app1.get('/'.(req,res) = > {
    // Get the callback function
    var back = req.query.callback
    // The data and callback functions are concatenated back to the browser
    res.send(`${back}` (' hello, 91))})Copy the code

2, CORS

CORS is what the server does by setting the response header. For details on which response headers can be set and how to set them, check out the resources.

<body>
    <h1>hello</h1>
    <script>
        fetch('http://localhost: 90/').then(function (data) {
            return data.text()
        }).then(function (data){
            alert(data)
        })
    </script>
</body>
Copy the code
app1.get('/'.(req,res) = > {
    // Set the response header
    res.header('Access-Control-Allow-Origin' , The '*')
    res.send(`${back}` (' hello, 91))})Copy the code

3. Node reverse proxy

What is a forward proxy and what is a reverse proxy
  • Forward proxy: The proxy represents the client. The server identifies the proxy but does not identify the client.
  • Reverse proxy: The proxy server. The client recognizes the proxy but does not recognize the server.

Forward proxies are easy to understand, but reverse proxies are an example. For example, you call 10086 for service, ‘you’ is the client, 10086 is the agent, 10086 agent behind the artificial customer service (server) you do not care which customer service to service, you only know that 10086 can get service on the right.

Here we use Express + Express-HTTP-proxy to implement node reverse proxy to solve cross-domain problems github address

var express = require('express')
var proxy = require('express-http-proxy'); 
var app1 = express()
app1.get('/test' , (req , res) = > {
	res.send('Hello port 91')
})
app1.listen(90)


var app2 = express()
app2.use(express.static(__dirname))
app2.listen(91)
app2.use('/api',proxy('http://localhost:90'))

Copy the code
<body>
<script type="text/javascript">
	fetch('http://localhost:91/api/test').then(function (data) {
		return data.text()
	}).then(function (data) {
		console.log(data)
	})
</script>
</body>
Copy the code

We use the fetch sends a request to http://localhost:91/api/test after the proxy will actually sends a request to http://localhost:90/test, the API will be replaced by an empty string, and keep the test, So you get the data. The results of

The above is my answer to these three specific cross-domain implementation methods, I hope to help you, if you feel inadequate, welcome to leave a message for us to communicate, mutual progress, thank you.