问题描述

有这么一个html页面，具体代码如下：
Nginx_CORS.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>跨域问题-Nginx代理转发</title><script src="js/jquery-2.1.1.min.js"></script>
</head><body><script>$.ajax({type: 'GET',url: 'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false',success: function(result) {document.writeln("fetch success!");let article = result.articles[0];for (const key in article) {if (article.hasOwnProperty(key)) {const element = article[key];document.writeln(element + '<br/>');}}document.writeln(result);},error: function() {document.writeln("fetch failed!");}});</script></body></html>

当在浏览器中打开时(不是在文件管理系统直接双击打开，非file://协议，在http://或https://访问)，控制台报错。

图1.浏览器打开界面

问题很明显，一个在http://127.0.0.1:5500域下的页面要访问http://www.csdn.net域的接口，跨域了，浏览器不允许这么干。

解决方案

既然页面和接口不在同一域名下，我想办法给他搞到“同一域名”下。可以利用Nginx的代理转发功能。

首先设置监听的端口(8080)与服务名(localhost)，当你在浏览器中访问该服务名与端口组成的域名(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://localhost:8080/api/…这个接口我没有啊，这个接口请求也是可以被Nginx监听到的，通过设置Nginx让所有以http://localhost:8080/api开头的请求被转发到https://www.csdn.net,就可以获取结果了。

如果以 Nginx_CORS.html进行整个过程的话：

安装 Nginx;
修改配置文件 conf/nginx.conf;

启动 nginx;
浏览器中输入 http://localhost:8080/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false 进行测试，如果有返回结果，说明nginx代理配置没有问题;

修改 Nginx_CORS.html 代码，主要是请求的url;

        $.ajax({type: 'GET',// 未设置代理时报错 跨域问题，Web应用与发出的接口请求地址不在同一域名下// url: 'https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false',// 设置代理后，nginx监听到 /api 请求后进行转发，不会出现跨域问题，Web应用与发出的接口请求地址在同一域名下url: '/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false',success: function(result) {document.writeln("fetch success!");let article = result.articles[0];for (const key in article) {if (article.hasOwnProperty(key)) {const element = article[key];document.writeln(element + '<br/>');}}document.writeln(result);},error: function() {document.writeln("fetch failed!");}});

浏览器中输入 http://localhost:8080,出现类似下图

跨域问题解决方案--Nginx代理转发相关推荐

vue反向代理解决跨域及部署nginx端口转发解决跨域
1. 前言本文是为了解决vue反向代理解决跨域及部署服务器nginx端口转发解决跨域,因为踩了不少的坑,百度了很多,也试了太多的方法,最终得以解决,所以记录一下,希望遇到同样问题的友友们可以高效的解 ...
使用nginx代理跨域，使用nginx代理bing的每日一图
前言自从搞清楚了跨域原理后一直自鸣得意,感觉跨域没啥问题了.而事实上对关于跨域的几个header的理解也有限,但那又如何,我能做到跨域就行了.今天想把博客背景图改成bing的每日一图,发现遇到跨域问 ...
解决vue项目中前后端交互的跨域问题、nginx代理配置
最近新接了一个项目,需要自己写一个小demo和后端联调,第一次用自己写的demo和后端联调,出现了问题. 问题:Access to XMLHttpRequest at 'http://192.168. ...
通过 Nginx 代理转发配置实现跨域（API 代理转发）
通过 Nginx 代理转发配置实现跨域(API 代理转发) 阅读 2285 收藏 119 2017-04-08 原文链接:www.thinktxt.com 1元视频体验视频通话10000分钟cloud ...
前端常见跨域问题解决方案
前端常见跨域解决方案(全) 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的. 广义的跨域: 1.) 资源跳转: A链接.重定向.表单提交 2.) 资源嵌入: & ...
跨域请求解决方案及详解
1. 什么是跨域跨域,是指浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制. 同源策略限制了一下行为: Cookie.LocalStorage ...
实现全球同服，保障业务出海——腾讯云跨域加速解决方案
2019独角兽企业重金招聘Python工程师标准>>> 业务出海难在哪? 欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者: 方坤丁传统的出海方案以游戏业务为例,国内 ...
关于Ajax跨域的解决方案
关于Ajax跨域的解决方案和一些个人理解 Ajax跨域的原因 Ajax跨域的解决方案 Ajax跨域的原因浏览器限制跨域(协议.主机名.端口有一个不同就会产生跨域) xhr请求(XMLHttpReq ...
Web应用跨域访问解决方案
Web应用跨域访问解决方案 Web应用的跨域访问解决方案 Web跨域访问解决方案做过跨越多个网站的Ajax开发的朋友都知道,如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容,如果A网站与 ...

跨域问题解决方案--Nginx代理转发

文章目录

问题描述

解决方案

跨域问题解决方案--Nginx代理转发相关推荐

最新文章

热门文章