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

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

1. 問題

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

2. 查找資料

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

說法一、 

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

說法二、

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

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

3. 解決方法

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

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

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

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

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

后續(xù)更新：

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

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

將請(qǐng)求進(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 // 請(qǐng)求超時(shí)時(shí)間
})
 
// 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') { // 后臺(tái)返回碼，根據(jù)自己的業(yè)務(wù)進(jìn)行修改
      Notification.error({
        title: '錯(cuò)誤',
        message: res.resultDesc, // 錯(cuò)誤描述信息
        duration: 0
      })
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    Notification.error({
      title: '錯(cuò)誤',
      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è)置，也可以在請(qǐng)求里面局部設(shè)置其他headers
    //    'Content-Type': 'text/plain'
    // }
  })
}

發(fā)送請(qǐng)求，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)
    })

最后

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

最新評(píng)論