1 1 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— FindFirstfile traverses the folder Benjamin


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> 
     <meta charset = "UTF-8"> 
     <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 src = 'http: // localhost: 9871/API/JSONP? MSG = HelloJSONP & CB = JSONPCB' Type = 'Text/Javascript'> </Script> 

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 = CrossDomain

2. 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


Related Posts

jsp: usebean, jsp: setproperty Detailed explanation

Connect the server through the IP address and port

[python] [Original] OpenCV reads the camera or video template code

Callable and Runnable

1 1 ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————— FindFirstfile traverses the folder Benjamin

Random Posts

c language -io operation (1) wangs7

HDU 1028 IGNATIUS and the Princess III mother function water question, everyone pays attention, I want to start the mother function ~~ lionel

View constraints, add constraints, delete the constraints added columns, modify columns, delete columns

Spring 3 things Night

CSP-S 2019 preliminary knowledge point summary computer cultural basis