最近使用vue框架開發(fā)項(xiàng)目的時候， 遇到了一個問題，其實(shí)這個問題在之前就已經(jīng)遇到過，不過因?yàn)楫?dāng)時沒有時間，所以采用了另外一種方法解決。

今天再次遇到這個問題，就鐵了心解決，在網(wǎng)上找到很多資料，經(jīng)過嘗試都沒有能夠很好解決，經(jīng)過自己的一番折騰終于將這個問題解決。

1. 問題

vue開發(fā)的時候，使用axios跨域發(fā)送請求，同時post發(fā)送的數(shù)據(jù)格式是json格式，發(fā)送出去的時候發(fā)現(xiàn)控制臺報錯403，返回的信息提示是跨域的問題，但是后臺已經(jīng)對跨域進(jìn)行了處理，因此出現(xiàn)這個問題并不是后臺的問題，需要在前端解決，而且通過查看后臺的日志發(fā)現(xiàn)后臺根本沒有接收到請求。

2. 查找資料

網(wǎng)上找了很多資料，比如：

說法一、 

通過設(shè)置post請求的header中的Content-Type值為application/x-www-form-urlencoded，然后重新發(fā)送請求，發(fā)現(xiàn)控制臺還是返回403跨域信息的錯誤；

說法二、

在設(shè)置post請求的header中的Content-Type值為application/x-www-form-urlencoded以后，使用transformRequest方法對發(fā)送的數(shù)據(jù)進(jìn)行處理，這個時候奇跡發(fā)生了，請求發(fā)送出去了，并且成功獲取了后臺的響應(yīng)，

但是，發(fā)現(xiàn)這種方法存在一個問題，就是發(fā)送出去的數(shù)據(jù)不是JSON格式，而是字符串格式，真是令人頭大，然后不管我怎么折騰都沒有把這個方法解決。

3. 解決方法

就在這個問題陷入僵局的時候，我突然想到之前使用jquery的時候也曾經(jīng)遇到過相關(guān)的問題，但是通過設(shè)置Content-Type的值為"text/plain"解決的問題，于是乎我將post請求的headers中的Content-Type的值從application/x-www-form-urlencoded修改為text/plain，然后重新發(fā)送請求，這個時候，奇跡再次發(fā)生了，問題解決了！

4. 總結(jié)解決方法

設(shè)置全局post請求的Content-Type值為"text/plain"，然后在發(fā)送請求的時候需要對JSON數(shù)據(jù)進(jìn)行stringify轉(zhuǎn)化一下即可完美解決問題！

后續(xù)補(bǔ)充：

當(dāng)然可以不用設(shè)置全局，只需要單獨(dú)配置某個請求也是可以的，防止后面有其他類型的請求，造成污染。

后續(xù)更新：

注：本文所述的問題是基于后臺已經(jīng)做了跨域處理的情況下，如果不確定后臺是否已經(jīng)作跨域處理，建議先用原生的ajax或者jquery等進(jìn)行問題排查，不要因?yàn)楹笈_的疏忽導(dǎo)致前端浪費(fèi)時間去處理！??！

此次更新采用更規(guī)范更容易維護(hù)的方法來解決問題。

將請求進(jìn)行分離，統(tǒng)一處理所有的request和response，request.js代碼如下：

import axios from 'axios'
import { Notification } from 'element-ui'
 
// 創(chuàng)建axios實(shí)例
const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 50000 // 請求超時時間
})
 
// request攔截器
service.interceptors.request.use(
  config => {
    config.headers['Content-Type'] = 'text/plain' // 關(guān)鍵所在
    return config
  },
  error => {
    console.log(error) // for debug
    Promise.reject(error)
  }
)
 
// response 攔截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.resultCode !== '000') { // 后臺返回碼，根據(jù)自己的業(yè)務(wù)進(jìn)行修改
      Notification.error({
        title: '錯誤',
        message: res.resultDesc, // 錯誤描述信息
        duration: 0
      })
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    Notification.error({
      title: '錯誤',
      message: error,
      duration: 0
    })
    return Promise.reject(error)
  }
)
 
export default service

引用，test.js：

import request from '@/utils/request'
 
export function sendRequest(params) {
  return request({
    url: '/services/test',
    method: 'post',
    data: JSON.stringify(params),
    // header: { // 已經(jīng)在request.js里面進(jìn)行全局設(shè)置，也可以在請求里面局部設(shè)置其他headers
    //    'Content-Type': 'text/plain'
    // }
  })
}

發(fā)送請求，test.vue:

      
import { sendRequest } from '@/api/request'
 
let postData = {
        'serviceType': 'logQuery',
        'occurTime': new Date(),
        'key': scope.row.key,
        'type': scope.row.type
      }
 
sendRequest(postData)
    .then(response => {
      console.log(response)
    })

最后

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論