yii2.0 + vue 前后端交互(跨域)

前端配置指明发送到具体的URL

            需要使用vue-resource:
                下载: 
                    cd 项目根目录    

                    npm install vue-resource --save-dev

    项目结构:

                前端配置:
                    1.在main.js引入
                        import VueResource from 'vue-resource'

                        Vue.use(VueResource)

    

                    2.在发送请求.vue文件调用(例如App.vue)

	    test (){                          
               this.$http.get('http://localhost:8080/home/site/test').then(function (response) {
                  // 响应成功回调
                  console.log(response);
                  console.log('ss')
               }, function (response) {
                  // 响应错误回调
                  console.log(response)
                  console.log('failed')
               });
            }

3.在该.vue文件中添加测试按钮button，调用test方法，在页面点击测试   

                    点击

后端配置(yii):

项目结构:

home文件夹用于测试使用, 这边讲解使用该目录

1.需要指明哪个URL可以访问后端的某个controller, 如果所有URL都能访问, 使用*代替

在该controller中添加

		public function behaviors()
                	{
                    		return ArrayHelper::merge([
                        	[
	                            'class' => Cors::className(),
        	                    'cors' => [
                	                //'Origin' => ['http://localhost:1024'],
                        	        'Origin' => ['*'],
                                	'Access-Control-Request-Method' => ['POST'],
	                                'Access-Control-Allow-Credentials' => true,
        	                    ],
                	        ],
	                    ], parent::behaviors());
        	        }

   

2.在controller中添加被调用的方法:

		public function actionTest(){
                    return 'sss';
              	}

启动服务器就可以在vue页面点击button访问yii了。

注: 很多情况不能运行是访问后端controller下的action方法路径写错，先使用get方法测试，路径一定要写对!不然报500错误

若报错No 'Access-Control-Allow-Origin' header is present on....，需要在后端该controller里申明

'Origin' => ['http://localhost:1024'] (或者'Origin' => ['*']) 

	public function behaviors()
            {
                return ArrayHelper::merge([
                    [
                        'class' => Cors::className(),
                        'cors' => [
                            'Origin' => ['*'],
                            'Access-Control-Request-Method' => ['POST'],
                            'Access-Control-Allow-Credentials' => true,
                        ],
                    ],
                ], parent::behaviors());
            }