This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Good luck in open,

  • Everybody reader, small du meets with everybody again. Every timeWrite an articleWhen I wasVery happy“, because writing an article can say a lot of words to the reader, the thought of their own article mayHelp others, Ben Du is very happy.
  • If you have found this article helpful (A little bit of it. You can't cheat.Gnome male -"),Would you pleaseReaders to duLike comment favoritesDo a wave. What ifCan focus onThat’s even better.Ha, ha, ha
  • Your encouragement is my motivation to keep writing!
  • Have what problem, can point out to small du, everybody study together!

End of small talk, down to business...

Topic

  • What Little du brings to you isQuestions like that:Does the server receive browser requests in the same Origin policy?
  • Small duonMoment: this problem is necessary to investigate deeply, if you eagerly want to know the answer, that small du directly tell you!The answer is: yes.The server receives a request from the browser, if you want to verify, then go down with small du!

Q&a 1

  • Small pouchisSmall duGood friends oh, today it came to find small du homework.
  • Grunt (the word comes from grunt): Du, I have a question. What is the same origin policy? What’s the use of this?
  • Small du: Let’s take a look firstBaidu Encyclopedia to explain:

  • An inspiration
    • And we know that from above
    • (1) The browser is an implementation of the same origin policy. The same origin policy is a specification and can also be understood as a theory, and the browser is the practitioner of this theory.
    • (2) It is a security policy
    • (3) Its role is to restrict how documents from that source or scripts loaded by that source can interact with resources from another source. It can help block malicious documents and reduce the number of vectors that can be attacked.

Q&a 2

  • Small pouch: I know what isThe same-origin policyWell, it protects each source from othersMalicious attacksAnd increase the sourcesecurity.
  • Small du: Yeah, pretty much.
  • Small pouch: By the way, Doodle, I know what the same origin policy is, but the browser isHow do you determine homology? Tell me more about that!
  • Small du: ok! No problem. So what ishomologous? If two urlsProtocol, domain name (or IP), and portAre the sameThen they are considered homologous, and vice versa.
  • Explanation on MDN

  • Ruan Yifeng explained in his blog

  • For example
    • (1)Agreement is different
      • juejin.cn:80
      • juejin.cn:80
      • They’re not homologous because they’reDifferent protocols(One for HTTP and one for HTTPS)
    • (2)IP is different
      • http://192.168.0.1:80
      • http://192.168.0.2:80
      • From what has been discussed aboveSo here I think it is usefulipforIt’s more accurateA little bit. They’re not homologous because they’reipNot the same
      • Relationship between IP address and domain name

    • (3),Different ports
      • http://192.168.0.1:3000
      • http://192.168.0.1:3001
      • They’re not homologous because they’reportNot the same
    • note: If there is no write port, it is the default port of the protocol. For example, the default port of HTTP is80, the default HTTP port is443.

Q&a 3

  • Small grumble: this bottom an understand thoroughly, small du you too fierce, I point praise comment collection concern you.

  • Small du: hey hey hey, thank you, understand good, but only theory can not oh, we not only to understand the theory, and we still want to practice, because the great man once said: practice is the only standard for testing truth, ha ha ha, I can be really naughty. Let’s have an example!

Moment of truth

  • Truth of the matter of verification: In a real-world application scenario, does the server ever receive a browser request?

  • Practice: Use react to build the front end, and use AXIos to send a GET request inside, and use a Node server at the back end.

  • 1. Start react

    • note: not frame also has no relationship, native can also, readers can baidu, here is not the focus of this article, so small du will no longer narrate.
    • The react to learn through train react.docschina.org/docs/create…

    • The result is as follows:

    • Local: is a web address that you can use on your own computer.

    • On Your Network: It can be used On other devices (including local computers), but there is a caveat: if you do not have it On the server, it can only be accessed under the LOCAL area Network. I think if you put it on the Internet, then any device with an Internet connection should be able to access it.

    • Attached to my blog: Do you know how to open a react created page on your phone blog.csdn.net/L_Z_jay/art…

  • 2. Send get request, AXIos request core

    • The first way to write it

    • The second way to write it

  • 3. The node. Js module

    • Two GET request interfaces are enabled, as shown below. The open port is 8888
    let express = require('express'); let app = express(); app.get('/',(req,res)=>{ res.send("123"); }) app.get('/sameOrig',(req,res)=>{console.log(" I am node server, I received a browser request!" ); res.send('welcome node!!! '); }) app.listen(8888,()=>{ console.log("server is running..." ); })Copy the code
    • Start the Node Server

    • Download the Nodemon startup mode for your reference
      • This is my online to find www.jianshu.com/p/f60e14db0…
      • Installation processProblems encountered:Blog.csdn.net/L_Z_jay/art…(My blog)
    • Let’s try making a request

    It can be seen thatThe browser reported an errorTo seeThe reason it reported an error:The request was blocked by the same origin policy.

    • Did the Node server receive the request?

    It can be seen that the server has received the request we sent, so we try the second request mode.

    • Try the second request

    It’s the same problem.

    • Take a look at the server

    At this point, the server prints out two lines of data, indicating that the server received both of our requests,

    The result: under the same origin policy, the server can receive requests from the browser.

  • Official: The same origin policy is the behavior of the browser to protect local data from being contaminated by data retrieved by JavaScript code. Therefore, the same origin policy intercepts the data received by the client. That is, the request is sent, the server responds, but the browser cannot receive it.

  • To this, the end of the small du du time, can see the reader here, small du believe you have mastered almost, this article has more than two thousand words, read still quite tired (hey hey hey).

Good luck in the addressee

  • Du is still at school, so can only find time to write articles.
  • Every time I write an article, I have to spend a few days to think about it, change the format, the wrong words, and so on.
  • Feel writing an article very tired ah, ha ha ha! It takes too long, and makes doodle want water!
  • I hope readers, if you find it helpful, welcomeLike comment favoritesOne second, tootEncouragement is sorely needed!
  • It’s the weekend. Best wishes to all readersHappy weekend!!!!!!!!! (Du still has homework to do,-wuwuwu......)

Slip slip slip slip small du to make up homework with small grumble to go...