vue本地跨域设置不生效

Question

1.环境配置如下：

module.exports = {
  // 开发环境设置为根路径
  publicPath: '/',
  productionSourceMap: false,
  filenameHashing: true,
  // 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 ''
  devServer: {
    port: 80,
    disableHostCheck: true,
    proxy:{
      '/api': {
        target: 'http://ddemo.com/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      },
    },
  },

2.baselUrl设置为空

axios.defaults.baseURL = ''

3.使用时不带前缀

      return http.post('/api/coinRpcService/getCoinCount', data, reqPayload, true)

4.本地访问的时候不提示跨域,提示接口404，后端单独可以访问到这个接口。

回答需要的截图。

找不出问题在哪。。

Answer 1

1. 看看是不是远程服务器返回的 404。 'http://ddemo.com/ 改成 https://www.lilnong.top/cors/ 试试。
2. 换成 127 试试。防止你访问的服务器不对。

Answer 2

devServer: {
    proxy: {
      '/api': {
        // 测试服务器地址
        // target: 'http://10.17.31.17:8888',
        target: 'http://localhost:8888/test/',
        // target: 'http://10.17.18.155:8888/test',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

Answer 3

firefox安装扩展 CORS Everywhere
https://addons.mozilla.org/zh...

chrome 启动在终端，输入以下命令启动跨域模式 （mac）必须先彻底关闭之前打开的chrome浏览器
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security