After Alibaba Cloud OSS has anti-leech enabled, the Apple computer browser reports an error XHR error (req “error”), PUT https://file.test.net/?referer= -1 (connected: false , keepalive socket: false), resulting in failure to upload files
The vue project calls the relevant file operation interface through the OSS Browser.js SDK
01. Question
1. After the anti-leech is enabled on OSS, the request header is still not configured with referer
2. The referer has been configured in the encapsulated request.js
3. The referer has been configured in the proxy configuration of vue.config.js
The console error is shown in the figure below
02. Problem analysis
1. The error did not appear when uploading pictures
2. The video uploaded by the window computer can run normally even if the console output is wrong
3. The console will also output an error when the Apple computer uploads the video, but it cannot continue to run
03. Problem Solving
1. You need to configure headers in the request method of requesting Alibaba Cloud
2. The configuration parameter in headers is 'Referer': 'www.test.net' (the domain name of the OSS source site bound to the Alibaba Cloud OSS console)
3. It is best to add the local ip address (192.168.88.*) to the domain name of the OSS source site bound to the Alibaba Cloud OSS console, otherwise the local or test environment cannot access the Ali OSS file
The configuration is shown in the figure below
Special case
The putBucketReferer(client) method was called before requesting the Alibaba Cloud SDK, as shown in the figure below.
This error also occurs in the method in the figure, and it will return to normal after removing it.
The parameters are introduced as shown in the figure below
