引入网址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. Bootstrap 按钮颜色

    上述按钮CSS规则 .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-w ...

  2. 关于微信小程序<radio-group>布局排列

    微信小程序更新以后今天<radio>全部变成垂直排列了,布局乱了. 一开始尝试给外层<view>添加display:flex;flex-direction:row:未果. 后来 ...

  3. Web标准中xhtml规范的内容有哪些

    1.所有的标记都必须要有一个相应的结束标记 以前在HTML中,你可以打开许多标签,例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们.但 ...

  4. Python-Django 整合Django和jquery-easyui

    整合Django和jquery-easyui by:授客 QQ:1033553122 测试环境 win7 64 Python 3.4.0 jquery-easyui-1.5.1 下载地址1:http: ...

  5. Orchard详解--第九篇 拓展模块及引用的处理

    在分析Orchard的模块加载之前,先简要说一下因为Orchard中的模块并不是都被根(启动)项目所引用的,所以当Orchard需要加载一个模块时首先需要保证该模块所依赖的其它程序集能够被找到,那么才 ...

  6. MS SQL作业Schedule的限制注意事项

      最近遇到了一个关于MS SQL作业Schedule下有限制的特殊案例,有一个作业,用户要求执行的时间为:9:30,14:30,16:30, 19:00,于是我设置了两个Schedule,其中一个每 ...

  7. [20180823]IMU与db link.txt

    [20180823]IMU与db link.txt --//当使用db link查看远程表时,实际上会产生小小的日志.--//当时如果与IMU结合在一起,可以导致IMU的失效. 1.环境:SCOTT@ ...

  8. spring applicationContext.xml最全约束

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  9. SQL Server datetime类型转换超出范围的报错

    一个很基础的插入语句: insert into table1 select col1,convert(datetime,col2),convert(datetime,col3),col4,col5 f ...

  10. ATM-简单SQL查询

    use master go if exists(select * from sysDatabases where name = 'BankDB') drop database BankDB go cr ...