axios跨域请求(请求支援)

Question

pc端axios请求时出现跨域问题,另一个小程序的项目请求同一个接口却能用

页面代码

<script>
// import {getAll} from "@apis/home.js"
import axios from 'axios';
export default {
  name: "firstPage",
  data() {
    return {
      pagesname: "pdtdetail", //页面名称
      goods: [
        {
          gdurl: "./src/assets/images/gd1.png",
          title: "商品名称1",
          detail: "DTM-大孔-12.5",
          price: 268,
          oldPrice: 333.01
        },
        {
          gdurl: "./src/assets/images/gd2.png",
          title: "商品名称2",
          detail: "DTM-大孔-12.5",
          price: 228,
          oldPrice: 333.01
        },
        {
          gdurl: "./src/assets/images/gd3.png",
          title: "商品名称3",
          detail: "DTM-大孔-12.5",
          price: 238,
          oldPrice: 333.01
        }
      ],
      arrondiurl1: "@assets/images/arrondi1.png",
      arrondiurl2: "@assets/images/arrondi2.png",
      backgroundDiv: {
        backgroundImage: "url('./src/assets/images/arrondi1.png')",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      arrbig: {
        backgroundImage: "url('./src/assets/images/arrondi2.png')",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      arrsmall: {
        backgroundImage: "url('./src/assets/images/arrondi3.png')",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      }
    };
  },
  created() {
    this.getAll();
  },
  methods: {
    // getAll(){
    //   getAll({typeId:2,storeId:1}).then(res=>{
    //     console.log("数据" + res)
    //   })
    // },
    getAll() {
      axios.post(`http://172.16.10.166:8888/api/shop/banner`)
        .then(res => {
          console.log(res , "test");
        })
        .catch(error => {
          console.log(error);
        });


    }
    //去到详情页
  },
  mounted() {}
};

//main.js代码
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import axios from 'axios';
import 'element-ui/lib/theme-chalk/index.css';
import './assets/icon/iconfont.css';

Vue.use(ElementUI);
Vue.prototype.axios = axios
new Vue({
  // el: '#app',
  router,
  render: h => h(App)
}).$mount("#app")

//config代码
var path = require('path')
var webpack = require('webpack')

function resolve(dir) {
  return path.join(__dirname, dir)
}
const proxyUrl = process.env.NODE_ENV === 'http://172.16.10.166:8888/'
module.exports = {
  entry: './src/main.js',
  output: {
    // path: 'http://xx.com',
    path: path.resolve(__dirname, './dist'),
    // publicPath: 'http://xx.com',
    publicPath: '/dist/',
    filename: 'build.js'
  },
  devServer: {
    open: true,
    proxy: {
      '/': {
        target: proxyUrl,
        changeOrigin: true,
        pathRewrite: {
          '^/': ''
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.css|less$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      }, {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      // {
      //   test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
      //   loader: 'file-loader'
      // },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          plugins: ['syntax-dynamic-import']
        }
      },
      {
        // test: /\.(png|jpg|gif|svg)$/,
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      '@': resolve('src'),
      '@views': resolve('src/views'),
      '@pages': resolve('src/pages'),
      '@apis': resolve('src/apis'),
      '@utils': resolve('src/utils'),
      '@router': resolve('src/router'),
      // '@store': resolve('src/store'),
      '@styles': resolve('src/styles'),
      '@components': resolve('src/components'),
      '@assets': resolve('src/assets'),
      '@vendor': resolve('src/vendor'),
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  // devServer: {
  //   historyApiFallback: true,
  //   noInfo: true,
  //   overlay: true
  // },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

Answer 1

代理转发的时候把'/'换成'/api'  试试