nginx 本地文件配置代理，vue项目配置代理-一一网

前端开发本地调试时，难免会遇到跨域问题，不解决跨域问题，就会引起调试的困难

1.代理访问本地文件

文件路径 D:/workspace/nginx-page/index.html

<!DOCTYPE html>index.html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    nginx-test-html
</body>
</html>
复制代码

nginx.conf

server {
        listen       80;
        server_name  localhost;

        location /nginx-page/ {
            root D:/workspace/;
            index index.html index.htm;
        }
        location /page/ {
            alias D:/workspace/nginx-page/;
        }
 }
复制代码

访问路径1

访问路径2

2.代理vue项目

vue项目为localhost:8080，通过以下配置，
在vue项目里访问localhost:8888,就可以访问到我们要访问的代理路径。
如果nginx直接起服务 8080，则会与node服务的端口冲突

nginx.conf

server {
        listen       8088;
        server_name  localhost;

        location / {
            proxy_pass http://localhost:8080; #
        }

        location /api{
            proxy_pass http://www.proxy.com/api; #需要代理的地址
        }
 }
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端