Nginx解决vue项目打包后的跨域问题

vue项目打包完成之后，直接打开html文件，会出现以下报错：

1681303007504.png

原因

• 在浏览器打开本地的html文件， 上面请求的模型资源文件是一个本地文件， 协议是file://，如果是在服务器启动的话，则使用的是http或者https协议。
  出于安全性考虑， Chrome默认禁止了这种用法，file协议和http/https协议不同，会被Chrome认为是跨域访问，所以会报被CORS(Cross-Origin Resource Sharing，跨域资源共享)的安全策略阻止。
  所以才会导致我的页面一直处于加载的状态
• 这个问题只会发生在本地，如果是部署到服务器上面，或者是自己在vscode里面通过插件Live Server打开，都是没有问题的

解决跨域 —————Nginx

• 1.nginx下载
  http://nginx.org/en/download.html

• 2.解压下载的nginx，解压之后文件目录如下

  
  
  1681303357369.jpg
• 3.npm run build打包项目，会生成一个dist文件夹

• 4.将dist文件夹拖到上面解压出来的文件夹中的html文件中

  
  
  1681304000457.jpg
• 5.配置
  • 解压出来的文件中 conf=>nginx.conf
  • 如果配置多个项目 就再加server对象

server {
        listen       8080;//监听的端口，项目运行的接口，前后端接口都被代理到这个接口
        server_name  localhost; //项目运行地址的域名  IPv4地址
        autoindex on;//是否跨域
        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        #当路径匹配到/时，将会打开配置好的静态资源页面
        location / {
            root   html/dist;  //配置要打开的资源的根目录的地址，是以 nginx 下的 html 文件夹中dist为根目录来查找的
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;//解决跳转之后刷新404问题
        }

        #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   html;
        }
        
        #  配置反向代理,解决跨域问题 
                #当路径匹配到/api时，将用http://localhost:3000来代替
        location /api {
            rewrite ^/api/(.*)$ /$1 break;
            proxy_pass http://localhost:3000;//要代理的后端接口地址
        }
    }

• 6.启动nginx服务器
  • 常用命令
    • start nginx 开机
    • nginx -s stop 快速关机
    • nginx -s quit 优雅关机
    • nginx -s reload 重新加载配置文件
    • nginx -s reopen 重新打开日志文件
• 7.打开浏览器，输入配置时设置的运行地址，访问项目

           localhost:8080

记录跨域过程中的问题

• 代理失败 后端接口一直报404
• 首次进入成功，刷新之后一直是欢迎界面
  • 解决办法：
    成功杀掉进程就关闭了，也访问不到欢迎界面了，之后再重启再reload就能代理到了

      taskkill /f /t /im nginx.exe