current position:Home>[cross domain sharing] problems encountered when the front end requests resources

[cross domain sharing] problems encountered when the front end requests resources

2022-04-29 20:34:12Xiao He goes to bed early_

Form writing habits together ! This is my participation 「 Nuggets day new plan · 4 Yuegengwen challenge 」 Of the 7 God , Click to see the event details . This is participation fullstackopen 2022 Course Data for Countries Problems encountered in practice .

Realization function

Api  In machine readable format , It provides a large amount of data from different countries . Create an application , You can view data from different countries . Application can be from all Get data in . The user interface is very simple . By typing the search query in the search field , You can find the country to display .

1. Add a weather report for the country's capital to the view that displays data for a single country . There are dozens of weather data providers . Recommended one API yes

2. When less than 10 A country , But more than 1 individual , All countries matching the query are displayed , There is a button next to the country name , When the button is pressed , Show a view of the country :


API Provided to this example JSON Data form :

  1. The weather , Gave the longitude and latitude of the capital


  1. Map , Gave a link to the map


use axios.get There was a problem requesting data

1. from OpenWeatherMap Get weather

use axios.get(url,(req,res)=>{ }) The web address requested , Report errors :


This wave is completely unclear get request url Principle , Misoperation , Directly use the website address provided . After entering the official website, you can see that it actually provides weather query API Interface , Need to register , Generate a api-key, Then use... According to the document , It's simple .

Enter official website , Registered account : image.png Generate api-key: image.png

Be careful : Don't put api-key Save to source control Git in , We can't api-key Hard coded into source code . Use environment variables to save the key .

Save the key to .env file :

# .env
 Copy code 

And then from process.env Object access key value :

const api_key = process.env.REACT_APP_API_KEY
// variable api_key has now the value set in startup
 Copy code 

The call form can be seen on the official website

use iframe Problems encountered when the framework is embedded in the website

  1. Originally wanted to use API Back to us url, direct <iframe src=""></iframe> A Google map tag , As a result, the browser reported an error :

image.pngimage.png reason : Not all websites , Copy the website directly and give it to iframe/object Nested , The browser will be based on X-Frame-Options To control iframe/object Whether the page of the frame is allowed to load and display , here sameorigin , Indicates that it can only be used by homologous iframe quote , Cross domain iframe I can't show it . So the solution to this problem is generally in server End , Set up http Request header . The website can use this function , To make sure that the content of your website is not nested into someone else's website , Thus avoiding Clickjacking (clickjacking) The attack of .

Click hijacking technology can appear in the form of embedded code or text , Complete the attack without the user's knowledge , For example, clicking on a surface shows “ Play ” A button for a video , In fact, the completed operation is to change the user's social networking site personal information to “ Open ” state .

Must use iframe Nest this map to my own website ? It depends on whether the website itself provides one that can <iframe> Embedded page code . Including videos that want to embed some video websites , music , You can go directly to the website and find the applicable... Provided by the website itself iframe Code . Click in API Return URL , You can display maps , Found to provide :


But we can only get this from the database url, You can't get code suitable for nesting ( Unless you write about reptiles ). Pure front-end cannot solve , Finally find A way of thinking :

Will not be accessible across domains url Of host Set as the domain name of your website , This step is to even if the browser is right url Initiate request , because host Is the domain name of your server , The request will also enter your server ; The second step is to use middleware , Remove the... From the response header x-frame-options Limit . This is similar to simulating the effect of direct access from an empty browser page , Avoid homology restrictions .

Inheritance of source : Pass in page  about:blank  or  javascript: URL The executed script will inherit to open the URL The source of the document , Because of these types of URLs Does not contain information about the source server .

At present, it has not been solved in the code , After that, update it again At present, it has not been solved in the code , After that, update it again Maybe the title requires me to click the button to jump , Set up directly button Of onClick, solve , Therefore, we should consider whether the requirements and the data provided by the back-end are reasonable !!!

Homology strategy and cross domain resource sharing

If two URL(Universal Resource Locator Uniform resource locator , Commonly known as web address ) Of agreement protocol/ host host/ port port( If there is a designation ) All the same , Then these two URL It's homologous . Homology policy is an important security policy , It is used to limit how documents from one source or scripts it loads can interact with resources from another source . It can help block malicious documents , Reduce the media that may be attacked . Violating the homology strategy is cross domain .


There are many on the Internet Solving cross domain solutions


It's based on HTTP The mechanism of head , Allow the server to declare which origin has access to which resources through the browser .

Proxy forwarding

The same origin policy is the security policy set by the browser , As long as we don't send the request directly through the browser , Instead, the request is sent through the server , The server and the server can request data from each other , There is no cross domain concept , We configure a proxy server to request data from the destination server instead of the client , Then the proxy server returns the requested data to the client .

Browser request response model

Finally, review it :


copyright notice
author[Xiao He goes to bed early_],Please bring the original link to reprint, thank you.

Random recommended