引入网址https://blog.csdn.net/larger5/article/details/81286324

1、请求后端数据失败

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

    <script type="text/javascript">

        function upd() {

            $.ajax({

                type: "get",

                url: "http://120.79.197.130:8530/spring/user/get",

                success: function(result) {

                    console.log(result);

                }

            });

        }

    </script>

    <body>

        <!--获取-->

        <button id="btn2" onclick="upd()">Get request 获取</button>

    </body>

</html>

　　

2、加入 nginx

nginx 的下载方法：nginx: download 

1、在 conf/nginx.conf 中，很多都是默认配置，笔者把注释去掉，添加了自己少量的配置

worker_processes  1;

events {

    worker_connections  1024;

}

http {

    include       mime.types;

    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;

    server {

        listen       8888; # 任意

        server_name  localhost; 

        location / {

            root   html;

            index  index.html index.htm;

        }

        # 新加的

        location /spring {

            proxy_pass   http://120.79.197.130:8530; # 后端接口 IP:port

        }

        error_page   500 502 503 504  /50x.html;

        location = /50x.html {

            root   html;

        }

    }

}

　　2、点击 开启服务 
3、修改代码上述 html 代码的 url

$.ajax({
type: "get",
url: "/spring/user/get", // 注意链接
success: function(result) {
console.log(result);
}
});
4、将代码文件放入 nginx 的 html 文件夹中（可以把里边的其他 html 删掉）

如下

5、基于 nginx 服务器，访问该 html 文件，可以看到，跨域请求，成功访问数据 

前端使用 Nginx 反向代理彻底解决跨域问题的更多相关文章

  1. 简单配置nginx反向代理，实现跨域请求

    简单配置nginx去做反向代理,实现跨域请求 简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求. 更多详细配置,参考nginx官方文档 先介绍几个nginx命令 打开n ...

  2. nginx 反向代理，支持跨域，前后分离

    前端开发往往涉及到跨域问题,其中解决方案很多: 1.jsonp 需要目标服务器配合一个callback函数. 2.window.name+iframe 需要目标服务器响应window.name. 3. ...

  3. Nginx反向代理配置可跨域

    由于业务需要,同一项目中的前端代码放在静态环境中,而后端代码放在tomcat中,但此时问题却出现了:前端使用ajax请求后端获取数据时出现如下报错 XMLHttpRequest cannot load ...

  4. 【Node】node.js实现服务器的反向代理，解决跨域问题

    跨域对于前端来说是一个老大难的问题,许多方法如jsonp.document.domain + iframe...都有或多或少的问题,一个最佳实践就是通过服务器nginx做反向代理,但奈何不懂相关知识, ...

  5. vue反向代理（解决跨域）

    1,vue中有提供反向代理的接口,就是config/index.js中的proxyTable,我的脚手架版本是2.9.6,proxyTable配置初始为空,如下图. 2,将proxyTable配置如下 ...

  6. vue cli3.3 以上版本配置vue.config.js 及反向代理操作解决跨域操作

    const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.Pro ...

  7. 前端通过Nginx反向代理解决跨域问题

    在前面写的一篇文章SpringMVC 跨域,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式都是基 ...

  8. Webpack 开发服务器代理设置解决跨域问题

    在前端开发过程中,可能会遇到跨域问题,在 webpack 设置中对 devServer 配置代理即可解决跨域问题,具体设置如下: webpack.config.js module.exports = ...

  9. vue访问外部接口设置代理，解决跨域（vue-cli3.0）

    vue-cli3.0搭建的项目,平时访问内部接口配置了拦截器,今天需要调用天气预报的外部接口,发现跨域问题,通过配置代理解决. 1.在vue.config.js中配置代理 module.exports ...

随机推荐

  1. Tomcat启动时项目重复加载，导致资源初始化两次！

    一.现象: 每次启动Tomcat 的时候,工程会被加载两次 二.原因: 在tomcat/conf/server.xml配置虚拟目录引起,如下配置: 我们在Host标签里配置了appBase=" ...

  2. Eslint使用（webpack中使用）

    一.安装 npm i -D eslint npm i babel-eslint \ eslint-config-airbnb \ // Airbnb的编码规范是在业界非常流行的一套规范 eslint- ...

  3. jQuery与vue分别实现超级简单的绿色拖动验证码功能

    jquery的绿色拖动验证功能 在网上看到了一个这样的问题:那种像拖动滑块匹配图形的验证方式是怎么实现的?. 突然想到实现一个简单绿色拖动验证码的功能,在网上搜了下,有一个用jquery实现的该功能代 ...

  4. 30.Odoo产品分析 (四) – 工具板块(2) – 搜索和仪表盘(2)

    查看Odoo产品分析系列--目录 在前面的模块中,简单介绍过了odoo如何搜索系统中的各种数据集,并保存这些过滤器,以便在之后需要时能够轻松访问这些过滤器.这里将做更详细的介绍.最后分析仪表盘的功能, ...

  5. C# Synchronized 和 SyncRoot 实现线程同步的源码分析及泛型集合的线程安全访问

    转载:http://blog.csdn.net/zztfj/article/details/5640889 Synchronized vs SyncRoot 我们知道,在.net的一些集合类型中,譬如 ...

  6. 腾讯云Centos安装gitlab

    参考了网上很多人写的安装教程,结果并不好,最后阅读了官方的英文api,才安装成功,这里记录下来,方便以后使用.我的安装环境为腾讯云主机Centos7.3 64bit gitlab官方api地址点我试试 ...

  7. Linux中对逻辑卷的建立

    大体上与主分区的建立相同,只有一些不同. 建议大家先看下我的“Linux中安装硬盘后对硬盘的分区以及挂载”  https://www.cnblogs.com/feiquan/p/9219447.htm ...

  8. oracle大数据量更新引发的死锁问题解决方法及oracle分区和存储过程的思考

    前言 前几天上午在对数据库的一张表进行操作的时候,由于这张表是按照时间的一张统计表,正好到那天没有测试数据了,于是我想将表中所有的时间,统一更新到后一个月,于是对80w条数据的更新开始了.整个过程曲折 ...

  9. Spring MVC 异常处理 （九）

    完整的项目案例: springmvc.zip 目录 实例 除了依赖spring-webmvc还需要依赖jackson-databind(用于转换json数据格式) <dependency> ...

  10. 爬虫入门实例：利用requests库爬取笔趣小说网

    w3cschool上的来练练手,爬取笔趣看小说http://www.biqukan.com/, 爬取<凡人修仙传仙界篇>的所有章节 1.利用requests访问目标网址,使用了get方法 ...