vue跨域

一、

假如目标服务器端口是8080，我需要把vue的端口改成其他的比如8081。

在config目录下打开index.js,把port的8080改成8081
port: 8081
数据请求，后台不允许跨域，所有需要修改配置
在在config目录下打开index.js,添加以下代码
dev: {
  // Various Dev Server settings
  host: 'localhost', // can be overwritten by process.env.HOST
  port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
  errorOverlay: true,
  notifyOnErrors: true,
  poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api':{
      target:'http://localhost:8080',
      changeOrigin:true,
      pathRewrite:{
        '^/api':'/api'
      }
    }
  },
接着去build文件夹，打开webpack.dev.conf.js在devserver下添加
proxy: {
  '*': {//*表示所有url
    target: 'http://localhost:8080',
    changeOrigin: true,
    secure: false,
    ws: false
  },
  '/static/*': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    secure: false
  }
}
最后重启服务


完成以上两步开始项目
目录结构
build
config
src
    ---api//存放url地址
    ---base//存放基础组件
    ---common//存放公共样式，图片，js
        ---img
        ---css
        ---js//尽量不用，但是有些必须不得不操作dom的时候添加js
    ---components//存放组件
    ---router//存放路由
    ---store//存放vuex
    ---util//存放封装的cookice
    ---App.vue
    ---main.js
package.json
index.html


在main.js放了一个修改wds一直请求的bug
if (module.hot) {//解决wds一直请求的bug
  module.hot.accept();
}
main.js主要代码
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview';
import 'iview/dist/styles/iview.css';
import store from './store';
import axios from 'axios';
import 'common/css/base.css';
import 'common/css/animate.css';
import jquery from 'jquery';
Vue.use(iView);
Vue.config.productionTip = false;
Vue.prototype.$http=axios;
Vue.prototype.$=jquery;
if (module.hot) {//解决wds一直请求的bug
  module.hot.accept();
}
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
｝）
项目被要求用四层路由，这一点我是拒绝的，四层路由，马拉个币，其他的用vuex不就好了，奈何我是小前端
路由这块需要判断登录类似于后台的登录拦截
router.beforeEach((to, from, next) => {
  //to即将进入的目标路由对象，from当前导航正要离开的路由， next  :  下一步执行的函数钩子
  if(to.path === '/login'||to.path === '/register'){
    next()
  }  // 如果即将进入登录路由或者进入注册，则直接放行
  else {     //进入的不是登录路由
    if(util.getCookie('userInfo')){
      //如果需要登录验证，或者已经登录成功，则直接放行
      if(islogin.getislogin()){


      }
      next()
    }    else{
      //下 一跳路由需要登录验证，并且还未登录，则路由定向到  登录路由
      next({
        path: '/login'
      })
    }
  }

})

二、使用vue-jsonp

1.npm install vue-jsonp

2.在main.js中设置：

import VueJsonp from 'vue-jsonp'

Vue.use(VueJsonp );

3.在组件中引用：

this.$jsonp(url,paramet).then(json=>{

}).catch(err=>{

});

参考网站：点击打开链接

三、使用vueResource提供的this.$http方法

this.$http({

method:'get',

url:'',

...（options）

}).then(()=>{

//成功

},()=>{

//失败

})

发送请求时的options选项对象包含以下属性：

参数	类型	描述
url	string	请求的URL
method	string	请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
body	Object,FormDatastring	request body
params	Object	请求的URL参数对象
headers	Object	request header
timeout	number	单位为毫秒的请求超时时间 (0 表示无超时时间)
before	function(request)	请求发送前的处理函数，类似于jQuery的beforeSend函数
progress	function(event)	ProgressEvent回调处理函数
credientials	boolean	表示跨域请求时是否需要使用凭证
emulateHTTP	boolean	发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override
emulateJSON	boolean	将request body以application/x-www-form-urlencoded content type发送

参考网站：点击打开链接