前端使用 Nginx 反向代理彻底解决跨域问题

一、前言

前端使用 Nginx 反向代理彻底解决跨域问题_第1张图片
由于身处于小团队,作为后台的,不得已参与到前端开发中。首先迎来的就是跨域的问题。
个人觉得使用 nginx 是一种较为简单直接彻底的办法

二、流程

1、请求后端数据失败

前端使用 Nginx 反向代理彻底解决跨域问题_第2张图片
代码如下


<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
前端使用 Nginx 反向代理彻底解决跨域问题_第3张图片

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 删掉)
前端使用 Nginx 反向代理彻底解决跨域问题_第4张图片
如下
前端使用 Nginx 反向代理彻底解决跨域问题_第5张图片
5、基于 nginx 服务器,访问该 html 文件,可以看到,跨域请求,成功访问数据
前端使用 Nginx 反向代理彻底解决跨域问题_第6张图片

三、配置 HBuilder 内置服务器为 nginx

问题来了,跨域请求虽然是成功了,但是每次编写完 html,都要放到 nginx/html 下才能正常跨域请求,是不是觉得有点麻烦
像 Sublime 直接以 nginx/html 为工作环境即可
像 webstorm、HBuilder 都有内置服务器,要怎么破?
笔者主要使用 HBuilder,支持国产 ~,下面以 HBuilder 为例
1、点击 设置web 服务器
前端使用 Nginx 反向代理彻底解决跨域问题_第7张图片
2、新建外置 web 服务器
前端使用 Nginx 反向代理彻底解决跨域问题_第8张图片
内容可以如下示例:
前端使用 Nginx 反向代理彻底解决跨域问题_第9张图片
3、使用自己配置的服务器取代默认的服务器
前端使用 Nginx 反向代理彻底解决跨域问题_第10张图片
4、再以 nginx/html 为工作环境即可
最简单方法:
① 导入工程
前端使用 Nginx 反向代理彻底解决跨域问题_第11张图片
选择 这里写图片描述 再点击 这里写图片描述
以 nginx/html 下的目录
前端使用 Nginx 反向代理彻底解决跨域问题_第12张图片
点击完成即可

四、小结

至此, 没有所谓的跨域问题,且前端的开发环境依旧 ~
其他的编译器类似,不再多述

你可能感兴趣的:(前端使用 Nginx 反向代理彻底解决跨域问题)