阿里雲OSS上傳文件本地調試跨域問題解決

問題描述：

最近后台說為了提高上傳效率，要前端直接上傳文件到阿里雲，而不經過后台。因為在阿里雲服務器設置的允許源（region）為某個固定的域名下的源（例如 *.cheche.com），直接在本地訪問會有跨域問題。

 

解決方案：

在本機C:\Windows\System32\drivers\etc的hosts文件中（使用管理員身份打開並編輯）添加一行地址映射：127.0.0.1  test.cheche.com

 

 

然后把前端運行項目的端口改為80，以vue項目為例（config/index.js）

 

到這一步，運行項目，訪問http:// test.cheche.com,出現Invalid Host header提示，我們需要再修改一個地方：

找到build/webpack.dev.conf.js文件：

找到devServer，添加一行：disableHostCheck: true

添加位置如下：

devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: {
    rewrites: [
      { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
    ],
  },
  hot: true,
  contentBase: false, // since we use CopyWebpackPlugin.
  compress: true,
  host: HOST || config.dev.host,
  port: PORT || config.dev.port,
  open: config.dev.autoOpenBrowser,
  overlay: config.dev.errorOverlay
    ? { warnings: false, errors: true }
    : false,
  publicPath: config.dev.assetsPublicPath,
  proxy: config.dev.proxyTable,
  quiet: true, // necessary for FriendlyErrorsPlugin
  watchOptions: {
    poll: config.dev.poll,
  },
  disableHostCheck: true // 添加這一行
},

再次在地址欄輸入地址http://test.cheche.com，就可以正常訪問了。