vue2.0 proxyTable配置,解决跨域

vue浏览器跨域问题及解决办法

当浏览器报如下错误时,说明请求跨域。

localhost/:1 Failed to load http://www.thenewstep.cn/test/testToken.php: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

 

跨域的原因:

因为浏览器的同源策略的限制,不是同源的脚本不能操作其他源下面的对象。

 

什么是同源策略:

同源策略是一种约定,它是浏览器最核心也是最基本的安全功能,如果少了同源策略,则浏览器的正常功能可能会受到影响。可以说web是构建在同源策略基础上的,浏览器只是针对同源策略的一种实现,简单来说:协议、IP、端口三者相同,则为同源。

vue2.0 proxyTable配置,解决跨域_第1张图片

 

 

 

解决办法:

跨域的解决办法有很多,比如script标签、jsonp、后端设置cros等等。但是在webpack配置vue的proxyTable解决跨域。

 

 

在ProxyTable 中具体配置:

 

ProxyTable:{

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {

            '/api': {

                 target: 'http://www.baidu.com/',//接口域名 

                 changeOrigin: true,//是否跨域

                 pathRewrite:{

                        '^api':''  //需要rewrite重写的

                }

            }

        }

}

 

 

请求的两种方式:

    fecth和axios

 

1·fecth方式:

 

在需要请求的页面,只需要这样写(/api/+具体请求的参数):

fecth("/api/test/teskToken.php",{

    method: "POST",

    headers:{

        "Content-type":"application/json",

        token:"3333333333333333333333"

    },

    body: JSON.stringfy(data)

})

.then(res => res.json())

.then(data =>{

    console.log(data)

  })

 

2·axios请求:

在main.js文件下:

import Vue from 'vue'

import App from 'app'

import axios from 'axios'

 

Vue.config.productionTip = false

 

Vue.prototype.$axios = axios  //将axios挂载在vue实例原型上

 

//设置token

 

axios.defaults.headers.common['token'] = '3333333333333333'

//设置请求头

axios.defaults.headers.post['Content-type'] = 'application/json'

 

 

 

 

在请求数据页面:

 

this.$axios.post('/api/test/testpai',data).then(res =>{

    console.log(res)

}).catch(err =>{

    console.log(err)

})

 

你可能感兴趣的:(vue)