前言:
跨域方案有很多种, 既然我们用到了 vue, 那么就使用 vue 提供的跨域方案.
解决方案:
1. 修改 HttpRequestUtil.JS
- import axios from 'axios'
- export var baseurl = '/api'
- /**
- * Get 请求
- */
- export function get(url, callback){
- console.log('测试 get 请求')
- axios.get(baseurl+url)
- .then(function (response) {
- console.log(response)
- callback(response.data,true)
- })
- .catch(function (error) {
- console.log(error)
- callback(null,false)
- })
- }
- export default {
- get
- }
2. 修改 index.JS
- 1 'use strict'
- 2 // Template version: 1.3.1
- 3 // see http://vuejs-templates.github.io/webpack for documentation.
- 4
- 5 const path = require('path')
- 6
- 7 module.exports = {
- 8 dev: {
- 9
- 10 // Paths
- 11 assetsSubDirectory: 'static',
- 12 assetsPublicPath: '/',
- 13 proxyTable: {
- 14 '/api': {
- 15 target: 'http://127.0.0.1:8088',// 设置你调用的接口域名和端口号 别忘了加 http
- 16 changeOrigin: true,
- 17 pathRewrite: {
- 18 '^/api': 'http://127.0.0.1:8088'// 这里理解成用'/api'代替 target 里面的地址, 后面组件中我们掉接口时直接用 API 代替 比如我要调用'http://40.00.100.100:3002/user/add', 直接写'/api/user/add'即可
- 19 }
- 20 }
- 21 },
- 22
- 23 // Various Dev Server settings
- 24 host: 'localhost', // can be overwritten by process.env.HOST
- 25 port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
- 26 autoOpenBrowser: false,
- 27 errorOverlay: true,
- 28 notifyOnErrors: true,
- 29 poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
- 30
- 31
- 32 /**
- 33 * Source Maps
- 34 */
- 35
- 36 // https://webpack.js.org/configuration/devtool/#development
- 37 devtool: 'cheap-module-eval-source-map',
- 38
- 39 // If you have problems debugging vue-files in devtools,
- 40 // set this to false - it *may* help
- 41 // https://vue-loader.vuejs.org/en/options.html#cachebusting
- 42 cacheBusting: true,
- 43
- 44 CSSSourceMap: true
- 45 },
- 46
- 47 build: {
- 48 // Template for index.HTML
- 49 index: path.resolve(__dirname, '../dist/index.html'),
- 50
- 51 // Paths
- 52 assetsRoot: path.resolve(__dirname, '../dist'),
- 53 assetsSubDirectory: 'static',
- 54 assetsPublicPath: '/',
- 55
- 56 /**
- 57 * Source Maps
- 58 */
- 59
- 60 productionSourceMap: true,
- 61 // https://webpack.js.org/configuration/devtool/#production
- 62 devtool: '#source-map',
- 63
- 64 // Gzip off by default as many popular static hosts such as
- 65 // Surge or Netlify already gzip all static assets for you.
- 66 // Before setting to `true`, make sure to:
- 67 // NPM install --save-dev compression-webpack-plugin
- 68 productionGzip: false,
- 69 productionGzipExtensions: ['js', 'css'],
- 70
- 71 // Run the build command with an extra argument to
- 72 // View the bundle analyzer report after build finishes:
- 73 // `npm run build --report`
- 74 // Set to `true` or `false` to always turn it on or of
- 75 bundleAnalyzerReport: process.env.npm_config_report
- 76 }
- 77 }
- proxyTable: {
- '/api' : {
- target: 'http://127.0.0.1:8088' , // 设置你调用的接口域名和端口号 别忘了加 http
- changeOrigin: true ,
- pathRewrite: {
- '^/api' : 'http://127.0.0.1:8088' // 这里理解成用'/api'代替 target 里面的地址, 后面组件中我们掉接口时直接用 API 代替 比如我要调用'http://40.00.100.100:3002/user/add', 直接写'/api/user/add'即可
- }
- }
- },
来源: http://www.qdfuns.com/article/51070/1d3a78a5582ddfd1e74b6f3b700ab83c.html