引入网址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. CSS3 画基本图形，圆形、椭圆形、三角形等

    CSS3圆角#css3-circle{ width: 150px; height: 150px; border-radius: 50%; }CSS3 椭圆形css3 radius#css3-elips ...

  2. js 判断数组中的值是否都相等

    function isAllEqual(array) { if (array.length > 0) { return !array.some(function(value, index) { ...

  3. 微信小程序心得

    首先从官方文档给的框架说起,微信小程序官方文档给出了app.js, app.json, app.wxss. 先从这三个文件说起. - app.js 这个文件是整个小程序的入口文件,开发者的逻辑代码在这 ...

  4. 支持MPI的hdf5库的编译

    作者:朱金灿 来源:http://blog.csdn.net/clever101 因为最近要研究并行I/O,据说hdf5文件格式可以支持并行I/O,深度学习框架Caffe用的是hdf格式,所以决定把h ...

  5. writing objects : 值%停住

    在git bush 中使用命令:git config --global http.postBuffer 524288000 因为git上传,限定一次push命令的buffer大小.

  6. Javascript 对象 - 日期对象

    日期对象 在JavaScript中提供了Data对象,用于处理和日期有关的内容.通过Data对象可以获取系统时间.设置时间等.Data对象也具有prototype和constructor属性. 1创建 ...

  7. Html富文本编辑器

    本文推荐两款简单的富文本编辑器[KindEditor,NicEdit]用于获得所见即所得的编辑效果,本文仅供学习分享使用,如有不足之处,还请指正. 概述 这两款编辑器都是采用JavaScript编写, ...

  8. getprop从哪获取属性

    Android SystemProperties设置/取得系统属性的用法总结 通过调查得知,Android系统中取得/设置系统属性的用法参考以下3篇文章就足够了. 1.Android SystemPr ...

  9. C和C++头文件大全

    C.传统 C++ #include <assert.h> //设定插入点#include <ctype.h>  //字符处理#include <errno.h>   ...

  10. SQL语句计算距离今天生日还差几天

    转载于:http://www.w3dev.cn/article/20110125/sql-compute-birthdate-now-days.aspx SQL语句计算距离生日还差几天原理很简单,将要 ...