2019-10-21 21:32:53 qq_44775782 阅读数 12
  • 微信小程序框架mpvue实战:图书商城

    本项目使用的框架是美团团队推出的小程序框架Mpvue,项目为模块化、组件化、工程化的项目。涵盖了原生小程序API的使用、Vue.js核心语法及flyio第三方Ajax请求库,后端使用Koa框架进行搭建。学习本课程内容可以快速上手Mpvue,熟悉小程序同后端交互,及同微信官方的交互流程。

    8 人正在学习 去看看 张长志

vue的axios请求,获取到的服务端session为空

  • 验证码保存在session中,但是存在跨域请求,session不一致问题(这个问题困扰了一天)
    • 起因:http是无状态的,因此我们通常需要用到cookie以及session来保存状态,session是在服务器端存储的,会和cookie一起使用,设置了session之后,会发送给浏览器一个cookie,这个cookie是session_id,当再次请求的时候浏览器会将它发送给服务器,以此来找到对应的session.
      但是,我们实际使用的时候通常会用到跨域,就是向不同的域发起请求,但是默认情况下此时cookie是不会发送给服务器的,此时就导致了丢失session_id,从而导致了session的值为undefined
    • 最终解决方案
    // 在客户端axios请求中设置
    axios.defaults.withCredentials = true
    // 通过设置 withCredentials: true ,发送Ajax时,Request header中便会带上 Cookie 信息。
    
    // 然后在服务器端的cors()中同样要配置
    // 实现跨域
    app.use(cors({
        credentials: true
    }))
    
  • 踩的坑
    • 只在前端设置了axios.defaults.withCredentials = true,会一直报错
      has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Credentials’ header in the response is ‘’ which must be ‘true’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
    • 然后,在设置Access-Control-Allow-Credentials的时候,是在ctx.header(),ctx.set()都设置了但都是不管用,需要在cors中配置credentials: true
    • 还有在请求拦截中,或者响应拦截中设置也没用。

贴代码

//客户端的axios请求拦截https.js
import axios from 'axios'
import router from './router/index'

axios.defaults.baseURL = 'http://localhost:3000/api'//默认请求地址

axios.defaults.withCredentials = true

//请求拦截设置统一header
axios.interceptors.request.use(
    config => {
        if (localStorage.eleToken) {
            config.headers.Authorization = localStorage.eleToken
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
    )
    
//响应拦截 401 token过期处理
axios.interceptors.response.use(
    response => {
        return response
    },
    error => {
        // 获取错误状态码
        const {status} = error.response

        if (status == 401) {
            // 清除token
            localStorage.removeItem('eleToken')
            // 跳转登录页面
            router.push('/login')
        }
        return Promise.reject(error)
    }
)

export default axios
//服务端的入口文件app.js
const Koa = require('koa')
const Router = require('koa-router')
const bodyParser = require('koa-bodyparser')
const passport = require('koa-passport')
const session = require('koa-session')
const cors = require('koa-cors')

// 实例化koa
const app = new Koa()
const router = new Router()
app.use(bodyParser())

// 实现跨域
app.use(cors({
    credentials: true
}))

// 设置session用来保存验证码
app.keys = ['some secret hurr']; // 签名 默认
const CONFIG = {
    key: 'koa:sess', //cookie key (default is koa:sess)
    maxAge: 86400000, // cookie 的过期时间 maxAge in ms (default is 1 days)
    overwrite: true, //是否可以 overwrite (默认 default true)
    httpOnly: true, //cookie 是否只有服务器端可以访问 httpOnly or not (default true)
    signed: true, //签名默认 true
    // rolling: true, //在每次请求时强行设置 cookie,这将重置 cookie 过期时间(默认:false)
    renew: true, //(boolean) renew session when session is nearly expired,
};
app.use(session(CONFIG, app));

// 连接数据库
app.context.db = require('./dbconfig')

app.use(passport.initialize())
app.use(passport.session())
// 回调config文件中的passport.js
require('./config/passport')(passport)

// 配置路由地址localhost:3000/api/user
const user = require('./routes/api/user')
router.use('/api/user',user)

// 配置路由
app.use(router.routes()).use(router.allowedMethods())

app.listen(3000,() =>{
    console.log('端口3000')
})

这是我找到解决方案的地址,希望能帮助到你

2019-10-08 15:00:16 Janus_lian 阅读数 34
  • 微信小程序框架mpvue实战:图书商城

    本项目使用的框架是美团团队推出的小程序框架Mpvue,项目为模块化、组件化、工程化的项目。涵盖了原生小程序API的使用、Vue.js核心语法及flyio第三方Ajax请求库,后端使用Koa框架进行搭建。学习本课程内容可以快速上手Mpvue,熟悉小程序同后端交互,及同微信官方的交互流程。

    8 人正在学习 去看看 张长志
1、问题
  • 前端使用的vue,默认是部署在本地服务器的8080端口上,服务端使用的是node.js的koa框架,默认端口号是3000
  • 前端使用axios进行ajax请求时,报错信息如下在这里插入图片描述
    No 'Access-Control-Allow-Origin' header is present on the requested resource 可以看出是浏览器抛出了跨域请求异常的提示信息
2、解决
  • 服务器端使用的是node的koa框架,解决跨域问题可以引入库koa-cors
  • 首先安装依赖包:npm i koa-cors
  • 然后引入模块:const cors = require('koa-cors');app.use(cors());
  • 重启服务即可
const Koa = require('koa');
const cors = require('koa-cors');
const app = new Koa();
// koa-cors解决跨域
app.use(cors());

// log request URL:
app.use(async (ctx, next) => {
	console.log(`Process ${ ctx.request.method } , ${ ctx.request.url }...`);
	await next();
});

app.listen(3000);
console.log('开始监听3000端口...');
2018-08-23 15:11:39 brand2014 阅读数 1403
  • 微信小程序框架mpvue实战:图书商城

    本项目使用的框架是美团团队推出的小程序框架Mpvue,项目为模块化、组件化、工程化的项目。涵盖了原生小程序API的使用、Vue.js核心语法及flyio第三方Ajax请求库,后端使用Koa框架进行搭建。学习本课程内容可以快速上手Mpvue,熟悉小程序同后端交互,及同微信官方的交互流程。

    8 人正在学习 去看看 张长志

戳这里:原文首发于我的个人博客

下面就开始我的表演

一、先说一下我博客管理系统和服务端用到的东西

我的博客的服务端是采用的koa2 + MySQL,后台管理界面采用的是:Vue+ElementUi+axios。这都是些常规组合,没有什么好说的。

二、服务端

koa2-cors: 用来是设置跨域请求;

// 官方推荐配置
var Koa = require('koa');
var cors = require('koa2-cors');
 
var app = new Koa();
app.use(cors());

koa-session-minimal: 因为koa本身并不能处理 session,在 koa 中处理 session 需要其他中间件的支持,在网上一番搜索后,发现很多人用的这个,于是我也用了。。。;
koa-mysql-session: 用来吧session存到数据库里面

// 这两个模块用法

const session = require('koa-session-minimal');
const MysqlStore = require('koa-mysql-session');
// session存储配置
const sessionMysqlConfig= {
    user: config.database.USERNAME,
    password: config.database.PASSWORD,
    database: config.database.DATABASE,
    host: config.database.HOST,
}

// 配置session中间件
app.use(session({
    key: 'USER_SID',
    store: new MysqlStore(sessionMysqlConfig),
    cookie: {                   // 与 cookie 相关的配置
        domain: 'localhost',    // 写 cookie 所在的域名
        path: '/',              // 写 cookie 所在的路径
        maxAge: 1000 * 300,      // cookie 有效时长
        httpOnly: true,         // 是否只用于 http 请求中获取
        overwrite: false        // 是否允许重写
    }
}))

一切准备就绪,开始试试session吧

1. 在输入正确的用户名和密码后,先设置一下session的信息

 ctx.session = {
     user: res[0]['account'],
     id: res[0]['id']
}

此时,我们能看到在数据库和浏览器的登陆请求中已经有了session值,如图:
::: hljs-center

browsercookie.png
mysqlsession.png

:::

但是
当我请求其他接口的时候,发现浏览器的请求头里面的cookie不见了!!!,对,没有了。。。不管我发起什么请求,在后端请求里面都拿不到我需要的用户信息

//如果后端拿到了浏览器的cookie
//在后端可以通过
ctx.session.user  //拿到我们登陆成功后设置的用户信息

拿到的始终是一个空的 {}
通过去各大搜索引擎搜索发现:axios默认是不让ajax请求头部携带cookie的,?,需要手动设置:

axios.defaults.withCredentials=true;//让ajax携带cookie

好吧,?手动设置就设置吧,也不是什么难事。

设置完后重新登陆。。。
阿西吧!!!!?登不上去了,控制台报错了。。。。

Failed to load http://localhost:3500/login: Response to preflight request doesn't pass access control check: 
The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.
 Origin 'http://localhost:8080' is therefore not allowed access. 
The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

怎么又跨域了?!!之前不是设置了允许跨域请求吗???
。。。咱们继续上搜索引擎找找去。。。

header信息 Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin不可以为 ‘’,因为 '’ 会和 Access-Control-Allow-Credentials:true 冲突,需配置指定的地址????

好吧,咱又去修改之前的cors的配置

// 修改前
app.use(cors())
//  修改后如下
app.use(cors({
    origin: [ 'http://localhost:8080'], // 允许这个域名的 跨域请求
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
    maxAge: 5,
    credentials: true,
    allowMethods: ['GET', 'POST', 'DELETE'],
    allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}));

设置后终于可以正常登陆了,通过ctx.session也能成功拿到用户信息了??????

紧接着,另一个问题又诞生了?

我的服务端是前端和后台管理系统共用的。他们呢在不同的端口。。。但是这个跨域只允许设置一个域名。。。????,

不管了,先睡觉,小命要紧,明天再来!

不整了,已经用jwt,基于token验证方式了,不用纠结请求携带cookie时的跨域的问题了

2017-10-24 16:51:00 weixin_33985507 阅读数 49
  • 微信小程序框架mpvue实战:图书商城

    本项目使用的框架是美团团队推出的小程序框架Mpvue,项目为模块化、组件化、工程化的项目。涵盖了原生小程序API的使用、Vue.js核心语法及flyio第三方Ajax请求库,后端使用Koa框架进行搭建。学习本课程内容可以快速上手Mpvue,熟悉小程序同后端交互,及同微信官方的交互流程。

    8 人正在学习 去看看 张长志

在vux的项目中

1,首先,json文件的位置:

原因:

访问服务器文件,应该把 json文件放在最外层的static文件夹,这个文件夹是vue-cli内置服务器向外暴露的静态文件夹
 
2,一定要用get的请求方式,post就会404,亲测

 

3,请求路径

 

转载于:https://www.cnblogs.com/wang715100018066/p/7724455.html

2019-11-29 17:26:00 sinat_36729274 阅读数 71
  • 微信小程序框架mpvue实战:图书商城

    本项目使用的框架是美团团队推出的小程序框架Mpvue,项目为模块化、组件化、工程化的项目。涵盖了原生小程序API的使用、Vue.js核心语法及flyio第三方Ajax请求库,后端使用Koa框架进行搭建。学习本课程内容可以快速上手Mpvue,熟悉小程序同后端交互,及同微信官方的交互流程。

    8 人正在学习 去看看 张长志

https://github.com/GaryChangCN/koa2-formidable

上面是依赖库

解决问题:axios的post请求发送到node服务端,服务端使用ctx.request.body为{}对象

没有更多推荐了,返回首页