nginx解决跨域请求详解,nginx反向代理能解决跨域嘛

文章目录问题说明解决方案

问题的说明

有这样的html页面。 具体代码如下。

Nginx_CORS.html

呃！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width， initial-scale=1.0 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title跨域问题-Nginx代理传输/tite type=more category=home shown _ offset=1524276761019196 first _ view=false '，success 3360 function { result } { document } let article=result.articles[0]； for(constkeyinArticle ) if(article.hasownproperty ) key ) ) { const element=article[key]； document.writeln(element'br/'； }document.writeln(result )；error: function () document.writeln ) ' fetchfailed！' )； ()； 在浏览器中打开/script/body/html时(通过http://或https://访问，而不是直接双击文件管理系统将其打开)，控制台出现错误

图1 .浏览器打开界面

问题很明显，http://127.0.0.1:5500域下面的页面必须访问http://www.csdn.net域的接口，因为它超出了域，所以浏览器不允许这样做

解决方案页面和接口不在同一个域名下，我想设法让他得到“同一个域名”下。 可以利用Nginx的代理传输功能。

首先，设置要监听的端口(8080 )和服务名)。 thdld是在浏览器中访问由服务名和端口组成的域名) http://localhost:8080 )时，将监听到Nginx。 此时，通过设置Nginx的配置，Nginx将移动到上一个html(nginx_CORS.html )页面。 当加载html页面时，会发出接口请求(https://www.csdn.net/api/…) )。 将此接口请求的url参数更改为*/api/(在代码中)，然后删除以前的域名。 这样，浏览器就会看到你发出的请求地址是http://localhost:8080/api/…。 对于浏览器来说，html页的域名为http://localhost:8080*，接口请求的域名也为http://localhost:8080，因此不会出现域间问题。 剩下的问题是http://www.Sina.com/http://localhost :8080/API开头的请求可以转发到http://www.Sina.com/以获取结果。 如果在http://localhost:8080/api/…这个接口我没有啊，这个接口请求也是可以被Nginx监听到的，通过设置Nginx让所有以上进行整个过程：