前言

vue1.0时代我们可以通过jsonp方法进行跨域,但是vue更新到2.0之后,作者就不再推荐使用vue-resouce跟后台进行交互而是推荐使用axios,然而axios默认是没有跨域的jsonp方法的,我们可以在配置文件中设置代理来进行跨域。
在webpack.config.js(config—>index.js)文件里设置代理

美高梅电子游戏,最近在跨域、cookie
以及表单上传这几个方面遇到了点小问题,做个简单探究和总结。本文主要介绍了关于axios中cookie跨域及相关配置的相关内容,下面话不多说了,来一起看看详细的介绍吧。

dev: {
    env: require('./dev.env'),
    port: process.env.PORT || 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://yiinb.com', //设置调用接口域名和端口号别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/' //这里理解成用‘/api’代替target里面的地址,组件中我们调接口时直接用api代替
          // 比如我要调用'http://yiinb.com/login.php',直接写‘/api/login.php’即可
        }
      }
    }

1、 带cookie请求 – 画个重点

这样配置好之后我们就可以正常的使用get或post请求了,不用担心跨域问题

axios默认是发送请求的时候不会带上cookie的,需要通过设置withCredentials: true来解决。
这个时候需要注意需要后端配合设置:

mounted(){
//    this.$http.post('/api/login.php',"").then((res)=>{
//        console.log(res)
//    })
      this.$http({
        method: 'post',
        url: '/api/login.php',
        data: {username: 'Fred'}
      }).then((res)=>{
          console.log(res)
      })
    }
  • header信息 Access-Control-Allow-Credentials:true
  • Access-Control-Allow-Origin不可以为 ‘*’,因为 ‘*’ 会和
    Access-Control-Allow-Credentials:true 冲突,需配置指定的地址

如果后端设置 Access-Control-Allow-Origin: '*', 会有如下报错信息

Failed to load http://localhost:8090/category/lists: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:8081' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

后端配置缺一不可,否则会出错,贴上我的后端示例:

const express = require('express')
const app = express()
const cors = require('cors') // 此处我的项目中使用express框架,跨域使用了cors npm插件
app.use(cors{
   credentials: true, 
   origin: 'http://localhost:8081', // web前端服务器地址
   // origin: '*' // 这样会出错
  })

成功之后,可在请求中看到

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章