First, first understand why there are cross -domain problems. What will happen without cross -domain occurrence:
Why is there a cross -domain? Because ofBrowser’s homology strategy, is a safety mechanism.
Then where is this security mechanism reflected?
As far as I know, the browser does this homologous strategy from two aspects. One is requests for interfaces, and the other is inquiries with DOM. Imagine that there is no such restriction of the above two actions.
1. For interface requests:
There is a small thing called Cookie. Everyone should know that it is generally used to handle the scenes such as logging in. The purpose is to let the server know the request of this request. If you request the interface to log in, the server will add the SET-COOKIE field to the response head after verification, and then when the request is issued next time, the browser will automatically add the cookies in the Cookie of the HTTP request. You can know that this user has logged in. After knowing this, let’s see the scene:
1. You are going to clear your shopping cart, so you open the buying and buying website www.maimaiimai.com, and then log in successfully.
2. In the process of seeing something to buy, your good friends send you a link www.nidongde.com, and yin said with a smile, “You know”, you don’t hesitate to hesitate opened.
3. You browse www.nidongde.com with interest, who knows that this website has done something unspeakable! Because there is no restrictions on homologous strategies, it initiated a request to www.maimaiimai.com! Smart you must think of the above words “After the service side verification is passed, the SET-COOKIE field will be added to the response header, and then when the request is issued next time, the browser will automatically add the cookies in the header field of the HTTP request”, so In the first place, this illegal website is equivalent to logging in to your account, you can do whatever you want! If this is not a buying an account, but your bank account, then …
2. For DOM query:
1. One day you just wake up and receive an email, saying that your bank account is risky, and quickly click on www.yinghang.com to change the password. You are scared, and you can click in, or you are a familiar bank login interface. You decisively enter your account password and log in to see if there is less money.
2. The hazy sleeping eye, you didn’t see it clearly. The bank website you usually visited is www.yinhang.com, and now you visit www.yinghang.com. What did this fishing website do?
// html
<iframe name = "yinhang" src = "www.yinhang.com"> </iframe>
// js
// Because there is no restrictions on homologous strategies, the fishing website can directly get the DOM of other websites
const iframe = window.frames ['yinhang']
const node = iframe.document.GetelementByid ('Input' you enter the account password)
console.log (`I got this $ {node}, can I not get the account password you just entered?)So, after understanding the homologous strategy, we should eliminate misunderstandings of the browser. The homologous strategy is a good thing for the browser. Enter the door and reject everyone. That’s right, as long as we open the right way, we should be able to cross the domain.
Below to demonstrate the interface request under the homologous strategy
1. Each interface must have the corresponding back -end processing
front -end request:
<! Doctype html>
<html>
<head>
<meta charset = "UTF-8">
</head>
<body>
<script type = 'text/javascript'>
// The back -end return method is equivalent to executing this method. Because the back end puts the returned data in the parameter of the method, it can be obtained here.
Window.jsonPCB = Function (res) {
console.log (res)
}
</script>
<script src = 'http: // localhost: 9871/API/JSONP? MSG = HelloJSONP & CB = JSONPCB' Type = 'Text/Javascript'> </Script>
</body>
</html>back -end request processing:
// Tools that fail to success in handling
const {Successbody} = reques ('../ Utli')
Class CrossDomain {
static async jsonp (CTX) {
// The parameters passed by the front end
const Query = ctx.request.query
// Set a cookies
ctx.cookies.Set ('tokenid', '1')
// query.cb is the name of the method agreed in the front and rear end. In fact, the back end returns a direct execution method to the front end. Because the front end is a request initiated by the Script tag, it is equivalent to executing after returning this method and the required to be required. The returned data is placed in the parameter of the method.
ctx.body = `$ {query.cb} ($ {json.stringify (successbody ({msg: query.msg}, 'Success')}
}
}
module.exports = CrossDomain2. All interfaces are handled uniformly
back -end interface processing
Const Path = Require ('PATH')
const koa = request ('koa')
const koastatic = Require ('Koa-Static')
const bodyparser = reques ('koa-bodyparser')
const router = reques ('./ router')
const cors = require ('koa2-cors')
const app = new koa ()
const port = 9871
app.USE (Bodyparser ()))
// Treatment of static resources. This is the directory after the front -end Build is good
App.USE (Koastatic (
Path.Resolve (__diRNAME, '../dist')
))
// Treatment Cors
App.USE (Cors ({
Origin: Function (CTX) {
Return 'http:// localhost: 9099'
},
credentials: true,
AllowMethods: ['get', 'post', 'delete'],
Allowheaders: ['T', 'Content-Type']
})))
// route
app.USE (router.routes ()). Use (router.allowedMethods ())
// Supervision port
app.Listen (9871)
console.log (`DEMO] Start-QUICK is Starting at port $ {port}`)front -end request:
fetch (`http: // localhost: 9871/api/cors? Msg = HelloCors`, {
// Need to bring cookies
credentials: 'Include',
// Add additional headers here to trigger non -simple requests
headers: {
'T': 'EXTRA Headers'
}
}). (res => {{{
console.log (res)
})3. Solve cross -domain problems, uniform domain name access on the front -end page
Think about it, if we still use the front -end domain name, and then have something to help us forward this request to the real back -end domain name. Do n’t you avoid cross -domain? At this time, Nginx appeared.
nginx configuration
server {
# 9099 port
Listen 9099;
# The domain name is Localhost
Server_name localhost;
#LocalHost: 9099/API looks like the real service side address http: // localhost: 9871
local ^~ /API {
proxy_pass http:// localhost: 9871;
}
}The front end does not have to do anything, there is nothing to do except writing the interface, there is nothing wrong with the back end
// When request, use the domain name http: // localhost: 9099 when the front end is requested. The end address http: // localhost: 9871
fetch ('http:// localhost: 9099/API/iframepost', {
Method: 'Post',
headers: {
'Accept': 'application/json',
'Content-type': 'application/json'
},
Body: json.stringify ({{
msg: 'helloiframepost'
})
})Reference link:https://segmentfault.com/a/1190000015597029