Yii + Vue 前后端交互(跨域)

如有疑问,请在微博 韩峰26 留言!

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

  需要使用vue-resource:

  下载:    

    cd 项目根目录
    npm install vue-resource --save-dev

  项目结构:

    

  配置:

    1.在main.js引入

      import VueResource from ‘vue-resource‘

      Vue.use(VueResource)

    

    2.在发送请求.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方法,在页面点击测试

      <button @click=‘test‘>点击</button>

后端配置(yii):

  项目配置:

  

  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 ‘test‘;
                }        

启动服务器就可以在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());
            }

扩展:

  yii 初始化时如何配置默认访问某个文件?

时间: 2024-10-05 00:56:40

Yii + Vue 前后端交互(跨域)的相关文章

前后端分离跨域问题解决方案

问题 因为最近在学习vue和springboot.用到了前后端分离.前端webpack打包运行的时候会启动nodejs的服务器占用8080端口,后端springboot自带tomcat启动占用1111端口(我自己设置的)...导致前端请求的ajax到后台会产生跨域问题...然后自己试了试发现有2种办法都可以解决. 利用SpringMVC @CrossOrigin注解 1 package com.labofjet.system.controller; 2 3 import org.slf4j.Lo

node与vue结合的前后端分离跨域问题

第一点:node作为服务端提供数据接口,vue使用axios访问接口, 安装axios npm install axios --save 安装完成后在main.js中增加一下配置: import axios from 'axios'; axios.defaults.withCredentials=true Vue.prototype.$axios = axios; main.js全部配置如下: import Vue from 'vue' import App from './App' impor

Django前后端分离跨域请求问题

一.问题背景 之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应,同源策略也是浏览器针对请求的安全问题所作出的一种保护行为.针对跨域问题,可以有下面的解决方式: JSONP方式 自定义中间件,设置响应头 使用django-cors-headers包 二.解决方式 (一)自定义中间件 JSONP本质上是利用html的一些不受同源策略影响的标签属性src,例如:<a

关于.Net Core 前后端分离跨域请求时 ajax并发请求导致部分无法通过验证解决办法。

项目中有这样一个页面.页面加载的时候会同时并发6个ajax请求去后端请求下拉框. 这样会导致每次都有1~2个"浏览器预请求"不通过. 浏览器为什么会自动发送"预请求"?请看以面连接 https://blog.csdn.net/charleslei/article/details/51906635 那么解决办法无非就是尽量避免发送"预请求". 后来经过反复测试发现"预请求"可以通过设置Access-Control-Max-Age

llaravel 前后端分离跨域问题

使用 laravel-cors 实现 Laravel 的跨域配置 一.需求 一个项目需要进行前端跨域,不适用 jsonp. 因此需要进行 cors 的设置. 最开始的时候,我使用的是路由中间件的方式,但是发现中间件不起作用. // 路由中间件 public function handle($request, Closure $next) { $response = $next($request); $response->header('Access-Control-Allow-Origin',

nginx配置反向代理解决前后端分离跨域问题

摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server { listen 80; server_name your.domain.name; location / { # 把跟路径下的请求转发给前端工具链(如gulp)打开的开发服务器 # 如果是产品环境,则使用root等指令配置为静态文件服务器 proxy_pass http://localhost:5000/; } location /api/ { # 把 /api 路径下的请求转发给真正的后端服务器

springboot+angular4前后端分离 跨域问题

springboot中新增一个过滤器如下: package com.rtpksps.kss.config;import org.springframework.stereotype.Component;import javax.servlet.*;import javax.servlet.http.HttpServletResponse;import java.io.IOException; /** * @author Administrator * @title: OriginFilter *

springboot前后端分离跨域

@Configurationpublic class CrossConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowCredentials(true) .allowedMethods("GET"

初识 vue —— 最简单的前后端交互示例

一.初识 vue 时的困惑 最近想学一门前端技术防身,看到博客园中写 vue 的多,那就 vue 吧.都说 vue 的官方教程写得好,所以我就从官方教程开始学习.官方教程说"Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用."但是这个概念是个什么鬼?还是让人一头雾水嘛.而且我一开始也没有搞清楚 vue 的定位,只知道它是一个前端库,但是确实不知道它的优势是什么,还以为它是一个学会就能一劳永