Nginx easily solves cross-domain issues lufy June 18, 2024 <p class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">This is the most useful post I've read when I met a CORS problem.</p> <p class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Refrinted from <a href="https://medium.com/@hubian/nginx-easily-solves-cross-domain-issues-009b95a5185">https://medium.com/@hubian/nginx-easily-solves-cross-domain-issues-009b95a5185e</a></p> <p id="bf6f" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">When you encounter a cross-domain problem, don’t immediately choose to copy it and try it. Please read this article in detail before processing. I believe it can help you.</p> <p id="ed03" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Preparation before analysis:</p> <ul class=""> <li id="3642" class="mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni bh" data-selectable-paragraph="">Front-end website address: <a class="af nj" href="http://localhost:8080/" target="_blank" rel="noopener ugc nofollow">http://localhost:8080</a></li> <li id="ec15" class="mi mj gr mk b ml nk mn mo mp nl mr ms mt nm mv mw mx nn mz na nb no nd ne nf ng nh ni bh" data-selectable-paragraph="">Server URL: <a class="af nj" href="http://localhost:59200/" target="_blank" rel="noopener ugc nofollow">http://localhost:59200</a></li> </ul> <p id="ce68" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">First, make sure that the server does not handle cross-domain issues. Second, use postman to test whether the server interface is normal.</p> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq nr"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*Bjp3c8JHSfKdD2GX 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*Bjp3c8JHSfKdD2GX 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*Bjp3c8JHSfKdD2GX 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*Bjp3c8JHSfKdD2GX 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*Bjp3c8JHSfKdD2GX 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*Bjp3c8JHSfKdD2GX 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*Bjp3c8JHSfKdD2GX 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*Bjp3c8JHSfKdD2GX 640w, https://miro.medium.com/v2/resize:fit:720/0*Bjp3c8JHSfKdD2GX 720w, https://miro.medium.com/v2/resize:fit:750/0*Bjp3c8JHSfKdD2GX 750w, https://miro.medium.com/v2/resize:fit:786/0*Bjp3c8JHSfKdD2GX 786w, https://miro.medium.com/v2/resize:fit:828/0*Bjp3c8JHSfKdD2GX 828w, https://miro.medium.com/v2/resize:fit:1100/0*Bjp3c8JHSfKdD2GX 1100w, https://miro.medium.com/v2/resize:fit:1400/0*Bjp3c8JHSfKdD2GX 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*Bjp3c8JHSfKdD2GX" alt="" width="700" height="449" loading="lazy" /></picture></div> </div> </figure> <p id="606c" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">When the website 8080 accesses the server interface, a cross-domain problem occurs. So how to solve it? Next, I will list various situations encountered across domains and solve them through nginx proxy (the same is true in the background, as long as you understand the principle).</p> <p id="23f6" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph=""><strong class="mk gs">Cross-domain mainly involves 4 response headers:</strong></p> <ul class=""> <li id="bc78" class="mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf ng nh ni bh" data-selectable-paragraph=""><code class="cu od oe of og b">Access-Control-Allow-Origin</code> Used to set the source address that allows cross-domain requests (preflight requests and formal requests will be verified when cross-domain)</li> <li id="8bb9" class="mi mj gr mk b ml nk mn mo mp nl mr ms mt nm mv mw mx nn mz na nb no nd ne nf ng nh ni bh" data-selectable-paragraph=""><code class="cu od oe of og b">Access-Control-Allow-Headers</code> Special header information fields allowed to be carried across domains (only verified in preflight requests)</li> <li id="1b2d" class="mi mj gr mk b ml nk mn mo mp nl mr ms mt nm mv mw mx nn mz na nb no nd ne nf ng nh ni bh" data-selectable-paragraph=""><code class="cu od oe of og b">Access-Control-Allow-Methods</code> Cross-domain allowed request methods or HTTP verbs (only in preflight request verification)</li> <li id="fc94" class="mi mj gr mk b ml nk mn mo mp nl mr ms mt nm mv mw mx nn mz na nb no nd ne nf ng nh ni bh" data-selectable-paragraph=""><code class="cu od oe of og b">Access-Control-Allow-Credentials</code> Whether to allow the use of cookies across domains. If you want to use cookies across domains, you can add this request response header and set the value to true (setting it or not setting it will not affect the sending of the request, but will only affect whether cookies should be carried across domains. , but if set, both preflight requests and formal requests need to be set). However, it is not recommended to use it cross-domain (it has been used in the project, but it is unstable and cannot be carried by some browsers) unless necessary, because there are many alternatives.</li> </ul> <p id="7447" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Many articles on the Internet tell you that adding these response headers directly to Nginx can solve cross-domain problems. Of course, most cases can be solved, but I believe there are still many cases where cross-domain problems will still be reported even if the configuration is correct. .</p> <p id="5914" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">What is a preflight request? : When a cross-domain condition occurs, the browser first asks the server whether the domain name of the current web page is in the server’s permission list, and which HTTP verbs and header information fields can be used. Only when a positive reply is received will the browser issue a formal <code class="cu od oe of og b">XMLHttpRequest</code>request, otherwise an error will be reported. As shown below</p> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq oh"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*bQ9t-s92k1HpXy-n 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*bQ9t-s92k1HpXy-n 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*bQ9t-s92k1HpXy-n 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*bQ9t-s92k1HpXy-n 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*bQ9t-s92k1HpXy-n 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*bQ9t-s92k1HpXy-n 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*bQ9t-s92k1HpXy-n 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*bQ9t-s92k1HpXy-n 640w, https://miro.medium.com/v2/resize:fit:720/0*bQ9t-s92k1HpXy-n 720w, https://miro.medium.com/v2/resize:fit:750/0*bQ9t-s92k1HpXy-n 750w, https://miro.medium.com/v2/resize:fit:786/0*bQ9t-s92k1HpXy-n 786w, https://miro.medium.com/v2/resize:fit:828/0*bQ9t-s92k1HpXy-n 828w, https://miro.medium.com/v2/resize:fit:1100/0*bQ9t-s92k1HpXy-n 1100w, https://miro.medium.com/v2/resize:fit:1400/0*bQ9t-s92k1HpXy-n 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*bQ9t-s92k1HpXy-n" alt="" width="700" height="70" loading="lazy" /></picture></div> </div> </figure> <p id="a0b6" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph=""><strong class="mk gs">Get started with the simulation:</strong></p> <p id="6002" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Nginx proxy port: 22222, configured as follows</p> <pre class="ns nt nu nv nw oi og oj bm ok ay bh"><span id="16f3" class="ol om gr og b bd on oo l op oq" data-selectable-paragraph="">server {<br /> <span class="hljs-keyword">listen</span> <span class="hljs-number">22222</span>;<br /> server_name localhost;<br /> location / {<br /> proxy_pass http:<span class="hljs-regexp">//l</span>ocalhost:<span class="hljs-number">59200</span>;<br /> }<br />}</span></pre> <p id="7b05" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Test whether the proxy is successful and access the interface again through Nginx proxy port 2222. You can see that the interface can be accessed normally after passing the proxy as shown below.</p> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq oh"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*st3eVct4yvZ7wg1n 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*st3eVct4yvZ7wg1n 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*st3eVct4yvZ7wg1n 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*st3eVct4yvZ7wg1n 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*st3eVct4yvZ7wg1n 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*st3eVct4yvZ7wg1n 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*st3eVct4yvZ7wg1n 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*st3eVct4yvZ7wg1n 640w, https://miro.medium.com/v2/resize:fit:720/0*st3eVct4yvZ7wg1n 720w, https://miro.medium.com/v2/resize:fit:750/0*st3eVct4yvZ7wg1n 750w, https://miro.medium.com/v2/resize:fit:786/0*st3eVct4yvZ7wg1n 786w, https://miro.medium.com/v2/resize:fit:828/0*st3eVct4yvZ7wg1n 828w, https://miro.medium.com/v2/resize:fit:1100/0*st3eVct4yvZ7wg1n 1100w, https://miro.medium.com/v2/resize:fit:1400/0*st3eVct4yvZ7wg1n 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*st3eVct4yvZ7wg1n" alt="" width="700" height="251" loading="lazy" /></picture></div> </div> </figure> <p id="4570" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Next, use website 8080 to access the interface address behind the Nginx proxy. The error message is as follows↓↓↓</p> <p id="3557" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Case 1:</p> <pre class="ns nt nu nv nw oi og oj bm ok ay bh"><span id="7738" class="ol om gr og b bd on oo l op oq" data-selectable-paragraph="">Access <span class="hljs-keyword">to</span> XMLHttpRequest at <span class="hljs-comment">'http://localhost:22222/api/Login/TestGet' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.</span></span></pre> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq oh"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*swEPvvKxMurNsFlG 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*swEPvvKxMurNsFlG 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*swEPvvKxMurNsFlG 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*swEPvvKxMurNsFlG 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*swEPvvKxMurNsFlG 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*swEPvvKxMurNsFlG 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*swEPvvKxMurNsFlG 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*swEPvvKxMurNsFlG 640w, https://miro.medium.com/v2/resize:fit:720/0*swEPvvKxMurNsFlG 720w, https://miro.medium.com/v2/resize:fit:750/0*swEPvvKxMurNsFlG 750w, https://miro.medium.com/v2/resize:fit:786/0*swEPvvKxMurNsFlG 786w, https://miro.medium.com/v2/resize:fit:828/0*swEPvvKxMurNsFlG 828w, https://miro.medium.com/v2/resize:fit:1100/0*swEPvvKxMurNsFlG 1100w, https://miro.medium.com/v2/resize:fit:1400/0*swEPvvKxMurNsFlG 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*swEPvvKxMurNsFlG" alt="" width="700" height="22" loading="lazy" /></picture></div> </div> </figure> <p id="c381" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">The error can be clearly located through the error message (pay attention to the red part). The priflight description is a pre-request. The CORS mechanism cross-domain will first perform a preflight (an OPTIONS request), and then the real request will be sent after the request is successful. This is designed to ensure servers are aware of the CORS standard to protect older servers that do not support CORS</p> <p id="db59" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Through the error message, we can know that the request response header of the preflight request is missing <code class="cu od oe of og b">Access-Control-Allow-Origin</code>. If there is an error, we can just change it. Modify the Nginx configuration information as follows (the red part is the added part), fill in whatever is missing, it is very simple and clear</p> <pre class="ns nt nu nv nw oi og oj bm ok ay bh"><span id="f57c" class="ol om gr og b bd on oo l op oq" data-selectable-paragraph="">server {<br /> <span class="hljs-keyword">listen</span> <span class="hljs-number">22222</span>;<br /> server_name localhost;<br /> location / {<br /> add_header Access-Control-Allow-Origin <span class="hljs-string">'http://localhost:8080'</span>;<br /> proxy_pass http:<span class="hljs-regexp">//l</span>ocalhost:<span class="hljs-number">59200</span>; <br /> }<br /> }</span></pre> <p id="cd1a" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Haha, when I was full of joy and thought it could be solved, I found that I still reported the same problem.</p> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq oh"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*08H0zncM04tPANfm 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*08H0zncM04tPANfm 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*08H0zncM04tPANfm 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*08H0zncM04tPANfm 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*08H0zncM04tPANfm 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*08H0zncM04tPANfm 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*08H0zncM04tPANfm 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*08H0zncM04tPANfm 640w, https://miro.medium.com/v2/resize:fit:720/0*08H0zncM04tPANfm 720w, https://miro.medium.com/v2/resize:fit:750/0*08H0zncM04tPANfm 750w, https://miro.medium.com/v2/resize:fit:786/0*08H0zncM04tPANfm 786w, https://miro.medium.com/v2/resize:fit:828/0*08H0zncM04tPANfm 828w, https://miro.medium.com/v2/resize:fit:1100/0*08H0zncM04tPANfm 1100w, https://miro.medium.com/v2/resize:fit:1400/0*08H0zncM04tPANfm 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*08H0zncM04tPANfm" alt="" width="700" height="22" loading="lazy" /></picture></div> </div> </figure> <p id="c86d" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">However, there is nothing wrong with our configuration. The problem lies with Nginx.</p> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq or"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*EYnMNman7fqSIQjm 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*EYnMNman7fqSIQjm 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*EYnMNman7fqSIQjm 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*EYnMNman7fqSIQjm 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*EYnMNman7fqSIQjm 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*EYnMNman7fqSIQjm 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*EYnMNman7fqSIQjm 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*EYnMNman7fqSIQjm 640w, https://miro.medium.com/v2/resize:fit:720/0*EYnMNman7fqSIQjm 720w, https://miro.medium.com/v2/resize:fit:750/0*EYnMNman7fqSIQjm 750w, https://miro.medium.com/v2/resize:fit:786/0*EYnMNman7fqSIQjm 786w, https://miro.medium.com/v2/resize:fit:828/0*EYnMNman7fqSIQjm 828w, https://miro.medium.com/v2/resize:fit:1100/0*EYnMNman7fqSIQjm 1100w, https://miro.medium.com/v2/resize:fit:1400/0*EYnMNman7fqSIQjm 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*EYnMNman7fqSIQjm" alt="" width="700" height="302" loading="lazy" /></picture></div> </div> </figure> <p id="ea12" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph=""><code class="cu od oe of og b">add_header</code> The directive is used to add return header fields and is valid if and only if the status code is those listed in the figure. If you want every response message to carry header field information, you need to add always at the end (after my testing, only <code class="cu od oe of og b">Access-Control-Allow-Origin</code>this header information needs to be added with always, and other header information will be carried back without adding always), then let's try adding it.</p> <pre class="ns nt nu nv nw oi og oj bm ok ay bh"><span id="8e71" class="ol om gr og b bd on oo l op oq" data-selectable-paragraph="">server {<br /> <span class="hljs-keyword">listen</span> <span class="hljs-number">22222</span>;<br /> server_name localhost;<br /> location / {<br /> add_header Access-Control-Allow-Origin <span class="hljs-string">'http://localhost:8080'</span> always;<br /> proxy_pass http:<span class="hljs-regexp">//l</span>ocalhost:<span class="hljs-number">59200</span>; <br /> }<br /> }</span></pre> <p id="6ed4" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">After modifying the configuration, I found that it took effect. Of course, it is not a cross-domain problem. The above problem has been solved because the error content has changed.</p> <p id="afc6" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Case 2:</p> <pre class="ns nt nu nv nw oi og oj bm ok ay bh"><span id="1ee4" class="ol om gr og b bd on oo l op oq" data-selectable-paragraph="">Access <span class="hljs-keyword">to</span> XMLHttpRequest at <span class="hljs-comment">'http://localhost:22222/api/Login/TestGet' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.</span></span></pre> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq oh"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*6MACxRG1YZsz_jMZ 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*6MACxRG1YZsz_jMZ 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*6MACxRG1YZsz_jMZ 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*6MACxRG1YZsz_jMZ 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*6MACxRG1YZsz_jMZ 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*6MACxRG1YZsz_jMZ 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*6MACxRG1YZsz_jMZ 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*6MACxRG1YZsz_jMZ 640w, https://miro.medium.com/v2/resize:fit:720/0*6MACxRG1YZsz_jMZ 720w, https://miro.medium.com/v2/resize:fit:750/0*6MACxRG1YZsz_jMZ 750w, https://miro.medium.com/v2/resize:fit:786/0*6MACxRG1YZsz_jMZ 786w, https://miro.medium.com/v2/resize:fit:828/0*6MACxRG1YZsz_jMZ 828w, https://miro.medium.com/v2/resize:fit:1100/0*6MACxRG1YZsz_jMZ 1100w, https://miro.medium.com/v2/resize:fit:1400/0*6MACxRG1YZsz_jMZ 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*6MACxRG1YZsz_jMZ" alt="" width="700" height="26" loading="lazy" /></picture></div> </div> </figure> <p id="dbe0" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">It can be known from the error message that the pre-request (option request) that is the default behavior of the cross-domain browser does not receive the ok status code. At this time, the configuration file is modified. When the request is an option request, a status code is returned to the browser. (usually 204)</p> <pre class="ns nt nu nv nw oi og oj bm ok ay bh"><span id="955e" class="ol om gr og b bd on oo l op oq" data-selectable-paragraph="">server {<br /> <span class="hljs-keyword">listen</span> <span class="hljs-number">22222</span>;<br /> server_name localhost;<br /> location / {<br /> add_header Access-Control-Allow-Origin <span class="hljs-string">'http://localhost:8080'</span> always;<br /> <span class="hljs-keyword">if</span> ($request_method = <span class="hljs-string">'OPTIONS'</span>) {<br /> <span class="hljs-keyword">return</span> <span class="hljs-number">204</span>;<br /> }<br /> proxy_pass http:<span class="hljs-regexp">//l</span>ocalhost:<span class="hljs-number">59200</span>; <br /> }<br /> }</span></pre> <p id="7f6b" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">After the configuration was completed, I found that the error message had changed.</p> <p id="ddb7" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Case 3:</p> <pre class="ns nt nu nv nw oi og oj bm ok ay bh"><span id="b649" class="ol om gr og b bd on oo l op oq" data-selectable-paragraph="">Access to XMLHttpRequest at <span class="hljs-string">'http://localhost:22222/api/Login/TestGet'</span> <span class="hljs-keyword">from</span> origin <span class="hljs-string">'http://localhost:8080'</span> has been blocked <span class="hljs-keyword">by</span> CORS policy: Request header field authorization <span class="hljs-keyword">is</span> <span class="hljs-keyword">not</span> allowed <span class="hljs-keyword">by</span> Access-Control-Allow-Headers <span class="hljs-keyword">in</span> preflight response.</span></pre> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq oh"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*2JCsLuV5AdXPL1b1 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*2JCsLuV5AdXPL1b1 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*2JCsLuV5AdXPL1b1 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*2JCsLuV5AdXPL1b1 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*2JCsLuV5AdXPL1b1 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*2JCsLuV5AdXPL1b1 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*2JCsLuV5AdXPL1b1 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*2JCsLuV5AdXPL1b1 640w, https://miro.medium.com/v2/resize:fit:720/0*2JCsLuV5AdXPL1b1 720w, https://miro.medium.com/v2/resize:fit:750/0*2JCsLuV5AdXPL1b1 750w, https://miro.medium.com/v2/resize:fit:786/0*2JCsLuV5AdXPL1b1 786w, https://miro.medium.com/v2/resize:fit:828/0*2JCsLuV5AdXPL1b1 828w, https://miro.medium.com/v2/resize:fit:1100/0*2JCsLuV5AdXPL1b1 1100w, https://miro.medium.com/v2/resize:fit:1400/0*2JCsLuV5AdXPL1b1 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*2JCsLuV5AdXPL1b1" alt="" width="700" height="23" loading="lazy" /></picture></div> </div> </figure> <p id="13fb" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">This means that the authorization header information is missing in the pre-request response header <code class="cu od oe of og b">Access-Control-Allow-Headers</code>(each situation will be different. After cross-domain occurs, the custom header information added is not allowed and needs to be added to the request response header <code class="cu od oe of og b">Access-Control-Allow-Headers</code>so that the browser knows this The carrying of header information is recognized by the server as legal. What I carry here is authorization. Others may be tokens and the like. Add whatever is missing). Once you know the problem, then modify the configuration file, add the corresponding missing part, and try again. try</p> <pre class="ns nt nu nv nw oi og oj bm ok ay bh"><span id="57de" class="ol om gr og b bd on oo l op oq" data-selectable-paragraph="">server {<br /> listen <span class="hljs-number">22222</span>;<br /> server_name localhost;<br /> location / {<br /> add_header Access-Control-Allow-Origin <span class="hljs-string">'http://localhost:8080'</span> always;<br /> <span class="hljs-keyword">if</span> ($request_method = <span class="hljs-string">'OPTIONS'</span>) { add_header Access-Control-Allow-Headers <span class="hljs-string">'authorization'</span>; #为什么写在<span class="hljs-keyword">if</span>里面而不是接着Access-Control-Allow-Origin往下写？因为这里只有预检请求才会检查 <span class="hljs-keyword">return</span> <span class="hljs-number">204</span>; } proxy_pass http:<span class="hljs-comment">//localhost:59200; }</span><br />}</span></pre> <p id="5987" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">At this time, it was found that the error reporting problem returned to situation 1.</p> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq oh"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*U-Q2_kedqVOF1G6I 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*U-Q2_kedqVOF1G6I 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*U-Q2_kedqVOF1G6I 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*U-Q2_kedqVOF1G6I 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*U-Q2_kedqVOF1G6I 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*U-Q2_kedqVOF1G6I 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*U-Q2_kedqVOF1G6I 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*U-Q2_kedqVOF1G6I 640w, https://miro.medium.com/v2/resize:fit:720/0*U-Q2_kedqVOF1G6I 720w, https://miro.medium.com/v2/resize:fit:750/0*U-Q2_kedqVOF1G6I 750w, https://miro.medium.com/v2/resize:fit:786/0*U-Q2_kedqVOF1G6I 786w, https://miro.medium.com/v2/resize:fit:828/0*U-Q2_kedqVOF1G6I 828w, https://miro.medium.com/v2/resize:fit:1100/0*U-Q2_kedqVOF1G6I 1100w, https://miro.medium.com/v2/resize:fit:1400/0*U-Q2_kedqVOF1G6I 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*U-Q2_kedqVOF1G6I" alt="" width="700" height="25" loading="lazy" /></picture></div> </div> </figure> <p id="789e" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">After testing, it has been verified that as long as <code class="cu od oe of og b">if ($request_method = 'OPTIONS')</code> it is written inside <code class="cu od oe of og b">add_header</code> , the external configuration will be invalid when making a preflight request. Why? ↓↓.</p> <p id="9736" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">The official documentation says this:</p> <blockquote class="os ot ou"> <p id="3a5d" class="mi mj ov mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph=""><em class="gr">There could be several add_header directives. These directives are inherited from the previous level if and only if there are no add_header directives defined on the current level.</em></p> </blockquote> <p id="1482" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">This means that <code class="cu od oe of og b">add_header</code> when there are no instructions at the current level, the ones from the previous level will be inherited <code class="cu od oe of og b">add_header</code>. On the contrary, if the current level exists <code class="cu od oe of og b">add_header</code>, it should not be able to inherit from the previous level <code class="cu od oe of og b">add_header</code>.</p> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq ow"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*2-sJBhm4FNi2FGCh 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*2-sJBhm4FNi2FGCh 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*2-sJBhm4FNi2FGCh 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*2-sJBhm4FNi2FGCh 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*2-sJBhm4FNi2FGCh 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*2-sJBhm4FNi2FGCh 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*2-sJBhm4FNi2FGCh 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*2-sJBhm4FNi2FGCh 640w, https://miro.medium.com/v2/resize:fit:720/0*2-sJBhm4FNi2FGCh 720w, https://miro.medium.com/v2/resize:fit:750/0*2-sJBhm4FNi2FGCh 750w, https://miro.medium.com/v2/resize:fit:786/0*2-sJBhm4FNi2FGCh 786w, https://miro.medium.com/v2/resize:fit:828/0*2-sJBhm4FNi2FGCh 828w, https://miro.medium.com/v2/resize:fit:1100/0*2-sJBhm4FNi2FGCh 1100w, https://miro.medium.com/v2/resize:fit:1400/0*2-sJBhm4FNi2FGCh 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*2-sJBhm4FNi2FGCh" alt="" width="700" height="391" loading="lazy" /></picture></div> </div> </figure> <p id="c593" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">The configuration modification is as follows:</p> <pre class="ns nt nu nv nw oi og oj bm ok ay bh"><span id="06e8" class="ol om gr og b bd on oo l op oq" data-selectable-paragraph="">server {<br /> <span class="hljs-keyword">listen</span> <span class="hljs-number">22222</span>;<br /> server_name localhost;<br /> location / {<br /> add_header Access-Control-Allow-Origin <span class="hljs-string">'http://localhost:8080'</span> always;<br /> <span class="hljs-keyword">if</span> ($request_method = <span class="hljs-string">'OPTIONS'</span>) {<br /> add_header Access-Control-Allow-Origin <span class="hljs-string">'http://localhost:8080'</span>;<br /> add_header Access-Control-Allow-Headers <span class="hljs-string">'authorization'</span>;<br /> <span class="hljs-keyword">return</span> <span class="hljs-number">204</span>;<br /> }<br /> proxy_pass http:<span class="hljs-regexp">//l</span>ocalhost:<span class="hljs-number">59200</span>; <br /> }<br /> }</span></pre> <p id="9e70" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">At this time, after the modification, I found that the cross-domain problem has been solved.</p> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq oh"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*SzhOpsWXtfIfv_hG 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*SzhOpsWXtfIfv_hG 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*SzhOpsWXtfIfv_hG 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*SzhOpsWXtfIfv_hG 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*SzhOpsWXtfIfv_hG 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*SzhOpsWXtfIfv_hG 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*SzhOpsWXtfIfv_hG 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*SzhOpsWXtfIfv_hG 640w, https://miro.medium.com/v2/resize:fit:720/0*SzhOpsWXtfIfv_hG 720w, https://miro.medium.com/v2/resize:fit:750/0*SzhOpsWXtfIfv_hG 750w, https://miro.medium.com/v2/resize:fit:786/0*SzhOpsWXtfIfv_hG 786w, https://miro.medium.com/v2/resize:fit:828/0*SzhOpsWXtfIfv_hG 828w, https://miro.medium.com/v2/resize:fit:1100/0*SzhOpsWXtfIfv_hG 1100w, https://miro.medium.com/v2/resize:fit:1400/0*SzhOpsWXtfIfv_hG 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*SzhOpsWXtfIfv_hG" alt="" width="700" height="286" loading="lazy" /></picture></div> </div> </figure> <p id="59cb" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">However, although the above solves the cross-domain problem, considering that the Nginx version may be updated in the future, I don’t know whether this rule will be modified. Considering that this writing method may carry two <code class="cu od oe of og b">Access-Control-Allow-Origin</code> , this situation is not allowed, as will be discussed below. arrive. So the configuration should be modified as follows:</p> <pre class="ns nt nu nv nw oi og oj bm ok ay bh"><span id="a86d" class="ol om gr og b bd on oo l op oq" data-selectable-paragraph="">server {<br /> <span class="hljs-keyword">listen</span> <span class="hljs-number">22222</span>;<br /> server_name localhost;<br /> location / {<br /> <span class="hljs-keyword">if</span> ($request_method = <span class="hljs-string">'OPTIONS'</span>) {<br /> add_header Access-Control-Allow-Origin <span class="hljs-string">'http://localhost:8080'</span>;<br /> add_header Access-Control-Allow-Headers <span class="hljs-string">'authorization'</span>;<br /> <span class="hljs-keyword">return</span> <span class="hljs-number">204</span>;<br /> }<br /> <span class="hljs-keyword">if</span> ($request_method != <span class="hljs-string">'OPTIONS'</span>) {<br /> add_header Access-Control-Allow-Origin <span class="hljs-string">'http://localhost:8080'</span> always;<br /> }<br /> proxy_pass http:<span class="hljs-regexp">//l</span>ocalhost:<span class="hljs-number">59200</span>; <br /> }<br /> }</span></pre> <p id="7ef2" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">It’s not over yet, keep chatting↓↓</p> <p id="5c1f" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Case 4:</p> <p id="6113" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Earlier APIs may only use POST and GET requests, and <code class="cu od oe of og b">Access-Control-Allow-Methods</code>this request response header only supports POST and GET across domains by default. When other request types occur, cross-domain exceptions will also occur.</p> <p id="be3a" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">For example, I changed the requested API interface request method from the original GET to PUT and tried it again. On the console an error will be thrown:</p> <pre class="ns nt nu nv nw oi og oj bm ok ay bh"><span id="398d" class="ol om gr og b bd on oo l op oq" data-selectable-paragraph="">Access to XMLHttpRequest at <span class="hljs-string">'http://localhost:22222/api/Login/TestGet'</span> <span class="hljs-keyword">from</span> origin <span class="hljs-string">'http://localhost:8080'</span> has been blocked <span class="hljs-keyword">by</span> CORS policy: Method PUT <span class="hljs-keyword">is</span> <span class="hljs-keyword">not</span> allowed <span class="hljs-keyword">by</span> Access-Control-Allow-Methods <span class="hljs-keyword">in</span> preflight response.</span></pre> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq oh"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*_r2Fex9RAOwU7Tfb 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*_r2Fex9RAOwU7Tfb 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*_r2Fex9RAOwU7Tfb 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*_r2Fex9RAOwU7Tfb 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*_r2Fex9RAOwU7Tfb 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*_r2Fex9RAOwU7Tfb 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*_r2Fex9RAOwU7Tfb 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*_r2Fex9RAOwU7Tfb 640w, https://miro.medium.com/v2/resize:fit:720/0*_r2Fex9RAOwU7Tfb 720w, https://miro.medium.com/v2/resize:fit:750/0*_r2Fex9RAOwU7Tfb 750w, https://miro.medium.com/v2/resize:fit:786/0*_r2Fex9RAOwU7Tfb 786w, https://miro.medium.com/v2/resize:fit:828/0*_r2Fex9RAOwU7Tfb 828w, https://miro.medium.com/v2/resize:fit:1100/0*_r2Fex9RAOwU7Tfb 1100w, https://miro.medium.com/v2/resize:fit:1400/0*_r2Fex9RAOwU7Tfb 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*_r2Fex9RAOwU7Tfb" alt="" width="700" height="24" loading="lazy" /></picture></div> </div> </figure> <p id="aa8e" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">The error content is also very clear. In this pre-request, the PUT method is not allowed to be used in cross-domain. We need to change the <code class="cu od oe of og b">Access-Control-Allow-Methods</code>configuration (is there anything missing? I only added PUT here. You can add it yourself. point) to let the browser know that the server is allowed</p> <pre class="ns nt nu nv nw oi og oj bm ok ay bh"><span id="d3cf" class="ol om gr og b bd on oo l op oq" data-selectable-paragraph="">server {<br /> <span class="hljs-keyword">listen</span> <span class="hljs-number">22222</span>;<br /> server_name localhost;<br /> location / {<br /> <span class="hljs-keyword">if</span> ($request_method = <span class="hljs-string">'OPTIONS'</span>) {<br /> add_header Access-Control-Allow-Origin <span class="hljs-string">'http://localhost:8080'</span>;<br /> add_header Access-Control-Allow-Headers <span class="hljs-string">'content-type,authorization'</span>;<br /> add_header Access-Control-Allow-Methods <span class="hljs-string">'PUT'</span>;<span class="hljs-comment">#为这么只加在这个if中，不再下面的if也加上？因为这里只有预检请求会校验，当然你加上也没事。</span><br /> <span class="hljs-keyword">return</span> <span class="hljs-number">204</span>;<br /> }<br /> <span class="hljs-keyword">if</span> ($request_method != <span class="hljs-string">'OPTIONS'</span>) {<br /> add_header Access-Control-Allow-Origin <span class="hljs-string">'http://localhost:8080'</span> always;<br /> }<br /> proxy_pass http:<span class="hljs-regexp">//l</span>ocalhost:<span class="hljs-number">59200</span>;<br /> }<br />}</span></pre> <p id="25ce" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Note here that after changing to PUT type, <code class="cu od oe of og b">Access-Control-Allow-Headers</code>the request response header will automatically verify <code class="cu od oe of og b">content-type</code>the request header, which is the same as case 3. Just make up for whatever is missing. If not added <code class="cu od oe of og b">content-type</code>, the following error will be reported.</p> <p id="4933" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">If you want to make it simple, <code class="cu od oe of og b">Access-Control-Allow-Headers</code>and <code class="cu od oe of og b">Access-Control-Allow-Methods</code>can be set to <code class="cu od oe of og b">*</code> , which means they all match. However, <code class="cu od oe of og b">Access-Control-Allow-Origin</code>it is not recommended to set <code class="cu od oe of og b">*</code> it up . For security reasons, it is necessary to restrict domain names.</p> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq oh"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*iaqPfMxY7pXW1t42 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*iaqPfMxY7pXW1t42 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*iaqPfMxY7pXW1t42 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*iaqPfMxY7pXW1t42 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*iaqPfMxY7pXW1t42 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*iaqPfMxY7pXW1t42 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*iaqPfMxY7pXW1t42 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*iaqPfMxY7pXW1t42 640w, https://miro.medium.com/v2/resize:fit:720/0*iaqPfMxY7pXW1t42 720w, https://miro.medium.com/v2/resize:fit:750/0*iaqPfMxY7pXW1t42 750w, https://miro.medium.com/v2/resize:fit:786/0*iaqPfMxY7pXW1t42 786w, https://miro.medium.com/v2/resize:fit:828/0*iaqPfMxY7pXW1t42 828w, https://miro.medium.com/v2/resize:fit:1100/0*iaqPfMxY7pXW1t42 1100w, https://miro.medium.com/v2/resize:fit:1400/0*iaqPfMxY7pXW1t42 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*iaqPfMxY7pXW1t42" alt="" width="700" height="23" loading="lazy" /></picture></div> </div> </figure> <p id="a805" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">After adding them all, the problem is solved. The 405 reported here is that the interface on my server only opens GET and does not open PUT. At this moment, I use the PUT method to request this interface, so the interface will return this status code.</p> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq oh"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*XGeFWw_znCaTxwzz 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*XGeFWw_znCaTxwzz 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*XGeFWw_znCaTxwzz 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*XGeFWw_znCaTxwzz 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*XGeFWw_znCaTxwzz 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*XGeFWw_znCaTxwzz 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*XGeFWw_znCaTxwzz 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*XGeFWw_znCaTxwzz 640w, https://miro.medium.com/v2/resize:fit:720/0*XGeFWw_znCaTxwzz 720w, https://miro.medium.com/v2/resize:fit:750/0*XGeFWw_znCaTxwzz 750w, https://miro.medium.com/v2/resize:fit:786/0*XGeFWw_znCaTxwzz 786w, https://miro.medium.com/v2/resize:fit:828/0*XGeFWw_znCaTxwzz 828w, https://miro.medium.com/v2/resize:fit:1100/0*XGeFWw_znCaTxwzz 1100w, https://miro.medium.com/v2/resize:fit:1400/0*XGeFWw_znCaTxwzz 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*XGeFWw_znCaTxwzz" alt="" width="700" height="247" loading="lazy" /></picture></div> </div> </figure> <p id="8d03" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Case 5:</p> <p id="8cbd" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Finally, let me talk about another situation, that is, the backend handles cross-domain, and there is no need to handle it by yourself (here is a complaint, some backend engineers change the server code to solve cross-domain, but they don’t understand the principle, so they can find it on the Internet. The code snippet is pasted, resulting in incomplete processing of the response information. For example, the method is not added completely, the headers are not added to the point, the one you use may not contain the ones used in the actual project, and the options request is not returned with a status code. etc., causing Nginx to report the following exception if it reuses the common configuration)</p> <pre class="ns nt nu nv nw oi og oj bm ok ay bh"><span id="be73" class="ol om gr og b bd on oo l op oq" data-selectable-paragraph="">Access <span class="hljs-keyword">to</span> XMLHttpRequest <span class="hljs-keyword">at</span> <span class="hljs-string">'http://localhost:22222/api/Login/TestGet'</span> <span class="hljs-keyword">from</span> origin <span class="hljs-string">'http://localhost:8080'</span> has been blocked <span class="hljs-keyword">by</span> CORS policy: The <span class="hljs-string">'Access-Control-Allow-Origin'</span> header <span class="hljs-keyword">contains</span> multiple <span class="hljs-keyword">values</span> <span class="hljs-string">'*, http://localhost:8080'</span>, but <span class="hljs-keyword">only</span> <span class="hljs-keyword">one</span> <span class="hljs-keyword">is</span> allowed.</span></pre> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq oh"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*Nnt6GMqejekV4HZR 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*Nnt6GMqejekV4HZR 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*Nnt6GMqejekV4HZR 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*Nnt6GMqejekV4HZR 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*Nnt6GMqejekV4HZR 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*Nnt6GMqejekV4HZR 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*Nnt6GMqejekV4HZR 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*Nnt6GMqejekV4HZR 640w, https://miro.medium.com/v2/resize:fit:720/0*Nnt6GMqejekV4HZR 720w, https://miro.medium.com/v2/resize:fit:750/0*Nnt6GMqejekV4HZR 750w, https://miro.medium.com/v2/resize:fit:786/0*Nnt6GMqejekV4HZR 786w, https://miro.medium.com/v2/resize:fit:828/0*Nnt6GMqejekV4HZR 828w, https://miro.medium.com/v2/resize:fit:1100/0*Nnt6GMqejekV4HZR 1100w, https://miro.medium.com/v2/resize:fit:1400/0*Nnt6GMqejekV4HZR 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*Nnt6GMqejekV4HZR" alt="" width="700" height="22" loading="lazy" /></picture></div> </div> </figure> <figure class="ns nt nu nv nw nx np nq paragraph-image"> <div class="ny nz fg oa be ob" tabindex="0" role="button"> <div class="np nq ox"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/0*-p5OoKH4xkhHPcHh 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/0*-p5OoKH4xkhHPcHh 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/0*-p5OoKH4xkhHPcHh 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/0*-p5OoKH4xkhHPcHh 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/0*-p5OoKH4xkhHPcHh 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/0*-p5OoKH4xkhHPcHh 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/0*-p5OoKH4xkhHPcHh 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/0*-p5OoKH4xkhHPcHh 640w, https://miro.medium.com/v2/resize:fit:720/0*-p5OoKH4xkhHPcHh 720w, https://miro.medium.com/v2/resize:fit:750/0*-p5OoKH4xkhHPcHh 750w, https://miro.medium.com/v2/resize:fit:786/0*-p5OoKH4xkhHPcHh 786w, https://miro.medium.com/v2/resize:fit:828/0*-p5OoKH4xkhHPcHh 828w, https://miro.medium.com/v2/resize:fit:1100/0*-p5OoKH4xkhHPcHh 1100w, https://miro.medium.com/v2/resize:fit:1400/0*-p5OoKH4xkhHPcHh 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="be lp oc c" role="presentation" src="https://miro.medium.com/v2/resize:fit:700/0*-p5OoKH4xkhHPcHh" alt="" width="700" height="275" loading="lazy" /></picture></div> </div> </figure> <p id="b3aa" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">This means that <code class="cu od oe of og b">Access-Control-Allow-Origin</code>multiple request response headers are returned at this moment, but only one is allowed. In this case, of course, you can modify the configuration and remove <code class="cu od oe of og b">Access-Control-Allow-Origin</code>this configuration. However, in this case, it is recommended that Nginx configuration and the server solve the cross-domain problem by themselves and only select other one.</p> <p id="1036" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Note here that if you follow the way I wrote it above, you can’t delete <code class="cu od oe of og b">if $request_method = 'OPTIONS'</code> the ones inside <code class="cu od oe of og b">Access-Control-Allow-Origin</code>. Just delete <code class="cu od oe of og b">!='OPTIONS'</code>the ones inside, because if it is a preflight request, it will be returned directly, and the request will not be forwarded to the 59200 service. If it is also deleted, it will The same error as case 1 will be reported. So why is it said that cross-domain should be solved at the server code level, or Nginx proxy should be used to solve it? Don’t mix it up, otherwise people who don’t understand the principle may not be able to solve the problem by looking for a piece of code posted online.</p> <p id="b5bf" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Post a complete configuration again ( <code class="cu od oe of og b">*</code>fill in the number according to your own 'preference'):</p> <pre class="ns nt nu nv nw oi og oj bm ok ay bh"><span id="3973" class="ol om gr og b bd on oo l op oq" data-selectable-paragraph="">server {<br /> <span class="hljs-keyword">listen</span> <span class="hljs-number">22222</span>;<br /> server_name localhost;<br /> location / {<br /> <span class="hljs-keyword">if</span> ($request_method = <span class="hljs-string">'OPTIONS'</span>) {<br /> add_header Access-Control-Allow-Origin <span class="hljs-string">'http://localhost:8080'</span>;<br /> add_header Access-Control-Allow-Headers <span class="hljs-string">'*'</span>;<br /> add_header Access-Control-Allow-Methods <span class="hljs-string">'*'</span>;<br /> add_header Access-Control-Allow-Credentials <span class="hljs-string">'true'</span>;<br /> <span class="hljs-keyword">return</span> <span class="hljs-number">204</span>;<br /> }<br /> <span class="hljs-keyword">if</span> ($request_method != <span class="hljs-string">'OPTIONS'</span>) {<br /> add_header Access-Control-Allow-Origin <span class="hljs-string">'http://localhost:8080'</span> always;<br /> add_header Access-Control-Allow-Credentials <span class="hljs-string">'true'</span>;<br /> }<br /> proxy_pass http:<span class="hljs-regexp">//l</span>ocalhost:<span class="hljs-number">59200</span>; <br /> }<br /> }</span></pre> <p id="d4d6" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">or:</p> <pre class="ns nt nu nv nw oi og oj bm ok ay bh"><span id="efbe" class="ol om gr og b bd on oo l op oq" data-selectable-paragraph="">server {<br /> <span class="hljs-keyword">listen</span> <span class="hljs-number">22222</span>;<br /> server_name localhost;<br /> location / {<br /> add_header Access-Control-Allow-Origin <span class="hljs-string">'http://localhost:8080'</span> always;<br /> add_header Access-Control-Allow-Headers <span class="hljs-string">'*'</span>;<br /> add_header Access-Control-Allow-Methods <span class="hljs-string">'*'</span>;<br /> add_header Access-Control-Allow-Credentials <span class="hljs-string">'true'</span>;<br /> <span class="hljs-keyword">if</span> ($request_method = <span class="hljs-string">'OPTIONS'</span>) {<br /> <span class="hljs-keyword">return</span> <span class="hljs-number">204</span>;<br /> }<br /> proxy_pass http:<span class="hljs-regexp">//l</span>ocalhost:<span class="hljs-number">59200</span>; <br /> }<br /> }</span></pre> <p id="6631" class="pw-post-body-paragraph mi mj gr mk b ml mm mn mo mp mq mr ms mt mu mv mw mx my mz na nb nc nd ne nf gk bh" data-selectable-paragraph="">Finally, this is an article about the process of solving cross-domain problems. If you read it carefully, I believe you can easily understand it and solve the problem yourself in actual use. I hope it can help everyone. The above content I came up with my own understanding of my own test code. If I understand anything wrong, please correct me.</p>
Comments (1)
Leave a Comment
kevhlmiltizrqvxyzzhxxrjmyuivsl