Nginx部署线上环境处理接口跨域

明知山

发布于 2021-08-31 18:02:33

9400

发布于 2021-08-31 18:02:33

文章被收录于专栏：前端开发随笔

自己开发了了个人网站调用了外部的api，本地使用proxy，处理了开发环境的跨域，但是在生产环境还是报了跨域

    devServer: {
        proxy: {
            '/api': {
                target: 'http://www.bing.com',
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ''
                }
            },
            '/baidu': {
                target: 'http://api.map.baidu.com',
                changeOrigin: true,
                pathRewrite: {
                    "^/baidu": ''
                }
            }
        },
    },

我购买的是window云服务器 使用nginx部署我的网站

    server {
        listen       80;
        server_name  localhost;

        location /api/ {
           proxy_pass http://www.bing.com/;
        }
        // 这里为处理跨域请求
        location /baidu/ {
           proxy_pass http://api.map.baidu.com/;
        }

        location / {
           root   C:\Users\Administrator\Desktop\build; //这是项目放置的文件路径
           index  index.html index.htm;
        }
        
        error_page   500 502 503 504  /50x.html;
        
        location = /50x.html {
            root   html;
        }
    }

拓展如果你想要网站使用History路由模式，不想在后面加上难看的# 你需要修改Nginx

        location / {
           root   C:\Users\Administrator\Desktop\build;
           index  index.html index.htm;
           try_files $uri $uri/ @rewrites;  //新增
        }
		//新增
        location @rewrites {
         rewrite ^(.+)$ /index.html last;
        }

个人网站