前端使用nginx的基础功能(windows),下载-安装-配置-运行

前端使用nginx的基础功能(windows)

使用场景 之前项目打包测试的时候,例如用vue写个项目打包后扔给后台,他们说运行不起来的时候...你可以在扔给他们之前说我自己测过了可以用的,你放的不对 第二个写一个简单的测试用例demo,调用接口的时候

之前配置代理啥的配置过,重来一遍

写个简单的h5页面,想调一下接口,发现跨域了,静态页面肯定跨域啊

接下来,怎么解决跨域呢,我请求的是第三方的接口,写个测试demo而已,那只能设置代理了,平时写项目用vue.大可不必为了设置个代理去写个vue项目吧,就一个html而已,于是,在本地搞个服务器nignx,配置一下代理转接.okkk

• 1.下载地址,选一个稳定版吧,也不常用nginx.org/en/download…
• 2.傻瓜式安装一下
• 3.打开nginx.conf这个文件

文件里面有好多东西,自己用到哪个去学哪个,记录下我用用到的,其他没用到的内容(包括注释的内容)我删掉了

#user  nobody;
worker_processes  1;

# error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
    #开启访问压缩文件
    gzip  on;

    server {
        listen       88; //改本地启动的端口号
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
    
        location / {
            root   D:/test/dist;          //这里是写你想用哪个文件位置做nignx的启动位置
            index  index.html index.htm;  //启动时首先显示的界面
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   D:/test/dist/error.html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        # 配置代理地址,上面那个location是默认的本地ip地址,当访问第三方跨域的时候,需要设置代理访问
        ## 例如项目中使用百度第三方
        location ^~ /baidu/ {
           proxy_pass   https://aip.baidubce.com/; //这里的连接后面一定要加一个反斜杠 /
        }

    }

}

项目中使用

// 获取access_token,此请求必须讲参数写在url上需要应用的apiKey和Sk <https://ai.baidu.com/ai-doc/REFERENCE/Ck3dwjhhu>测试
// https://aip.baidubce.com/rest/2.0/face/v1/merge?access_token=24.f9ba9c5341b67688ab4added8bc91dec.2592000.1485570332.282335-8574074
        axios({
            method: 'post',
            url: '/baidu/rest/2.0/face/v1/merge?access_token=24.f9ba9c5341b67688ab4added8bc91dec.2592000.1485570332.282335-8574074'
          })
          .then(function (response) {
            access_token = response.data.access_token
            expires_in = response.data.expires_in
          })
          .catch(function (error) {
            console.log('error', error);
          });

请求成功,用的他的示例,不要管返回内容