0

Vue上传阿里云OSS问题

 2 years ago
source link: https://painso.com/posts/tech/2020/vue-upload-aliyun-oss-issue/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Oct 29, 2020

Vue上传阿里云OSS问题

前段时间部署前端同事的 Vue 代码遇到的，记录一下。

前端同事在vue.config.js配置了 OSS 的 proxy

    "/ossUpload": {
        target: "https://xxx-proj.oss-cn-shanghai.aliyuncs.com",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
            "^/ossUpload": "",
        },
    },

由于 Vue 编译后为纯静态文件，导致我部署到 Nginx 访问不到这个/ossUpload路径，于是只能加个proxy_pass规则。

      location ^~/ossUpload {
        proxy_pass https://xxx-proj.oss-cn-shanghai.aliyuncs.com/;

加上后发现上传报错，直接在 Vue 启动开发模式发现上传 OSS 的状态码是204, 看到这个想到websocket的配置需要设置http_upgrade的一些配置，于是配置上去正常上传了。 最终 Nginx 配置如下

      location ^~/ossUpload {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-NginX-Proxy true;
        proxy_redirect off;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass https://xxx-proj.oss-cn-shanghai.aliyuncs.com/;

时间过去比较久， 一些细节忘记了 - -

ephz3nt

Vue阿里云OSS

2020-10-29 00:00


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK