引入网址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. 挑战常规--搭建gradle、maven私人仓库很简单

    常规 百度搜索“搭建maven私有仓库”,搜索到的结果几乎都是使用nexus 不一样的简单 如果了解maven上传原理,完全没必要搞得那么复杂庞大,区区不足百行代码就可以实现一个私有仓库. maven ...

  2. js 策略模式 实现表单验证

    策略模式 简单点说就是:实现目标的方式有很多种,你可以根据自己身情况选一个方法来实现目标. 所以至少有2个对象 .  一个是策略类,一个是环境类(上下文). 然后自己就可以根据上下文选择不同的策略来执 ...

  3. Android 实现倒计时操作

    new CountDownTimer(10000, 1000) { @Override public void onTick(long millisUntilFinished) { } @Overri ...

  4. Session过期，跳出iframe框架页显示会话过期页面

    web开发中经常会有这种情况,在一个主页面中包含侧边导航菜单和iframe,点击菜单项,对应页面会在iframe中显示,整个页面不会刷新.但是如果设置了会话Session,在会话过期后再操作会自动re ...

  5. application.properties多环境配置文件、jar包外部配置文件、配置项加密、程序中配置使用

    一.简介 spring boot项目application.properties文件存放及使用介绍 二.方法一多环境配置文件 我们一般都会有多个应用环境,开发环境.测试环境.生产环境,各个环境的配置会 ...

  6. ReactNative编写规范

    <一>  React 代码规范 文件与组件命名 扩展名: 使用.js作为js文件的扩展名.如果同一个文件夹下有同名而不同作用的js文件,则通过中缀(小写)进一步区分,例如:HomePage ...

  7. Maven和Solr简单总结

    一.1.Maven介绍 Maven是一个项目管理工具,Maven通过POM项目对象模型,对象项目进行管理,通过一个配置文件(xml文件)进行项目的管理.对象项目的声明周期中每个阶段进行管理(清理,编译 ...

  8. 如何设置访问内网web项目

    1.若我的项目搭建在一个linux虚拟机上 2.在内网的一台电脑做以下配置 3.测试访问 ******************************************************* ...

  9. Linux下Wheel用户组介绍

    昨天遇到一个很奇怪的事情,有一台服务器在使用su - root命令切换到root账号时,老是报密码不正确.但是root密码完全是正确的,而且可以使用账号密码直接ssh登录服务器.很是纳闷,如下所示: ...

  10. zsh快捷键

    bash和zsh两种shell功能非常相似,只不过zsh的功能比bash更强大一些.这两种shell的快捷键命令也非常相似,对于常用shell的人来说,了解一些快捷键操作将会十分有益,因为使用快捷键将 ...