跨域处理以及后台返回400处理

vue的跨域问题

新公司的第一个需求。
post请求，我的后台给我的是requests.post(‘http://xx.xx.x.xx:xxxx/v1/lyrics/christmas_lyrics’, data={‘sender’: ‘我’, ‘receiver’: ‘你’}）
直接在项目中下载axios之后(记得在main.js里引入axios)

axios.post('http://xx.xx.x.xx:xxxx/v1/lyrics/christmas_lyrics',{
	sender: this.sender,
	receiver: this.recever
}).then((res) => {
	console.log(res.data);
}).catch((error) => {
	console.log(error);
})

这样会提示Access-Control-Allow-Origin(跨域)
所以现在要解决跨域，查了好几个解决办法，发现都是差不多的套路。

1

config->index.jsl里找到proxyTable
在里面添加

proxyTable: {
      '/api' : {
        target: 'http://xxx.xx.x.x:xxxx',
        changeOrigin: true,
        secure: false,//如果地址为https的话，设置为false
        pathRewrite: {
          '^/api': '/'
        }
      }
    }

2

在组件中

axios.post('api/v1/lyrics/christmas_lyrics', {
	sender : this.sender,
    receiver : this.receiver
}, {
      headers : {
            "content-type": "application/x-www-form-urlencoded"
          }
        }).then((res) => {
          this.Lyrics = res.data.lyrics;
        }).catch((error) => {
          console.log('error', error);
        })

这样跨域问题就解决了。

我这里还是有别的问题，我这里显示是400，后台说我的请求过去了，但是他没有拿到我传递过去的参数，所以给我返回了400.
于是乎，我开始检查我的请求出现了什么问题。
400的问题是参数格式不对，我这里的问题是类似于乱码问题。
解决方案是
1
下载qs模块 npm install qs --save (记得在项目中引入)
2
对参数处理一下

axios.post('api/v1/lyrics/christmas_lyrics', qs.stringify({
	sender : this.sender,
    receiver : this.receiver
}), {
          headers : {
            "content-type": "application/x-www-form-urlencoded"
          }
        }).then((res) => {
          this.Lyrics = res.data.lyrics;
        }).catch((error) => {
          console.log('error', error);
        })

这样就拿到了想要的数据