問題描述

我在使用jquery的ajax請求後臺資料的時候發生了跨域的問題，在網上查了很多辦法都是說新增這個 dataType: ‘jsonp’,但是我使用過後沒有效果，最後我用Node寫了一個伺服器做代理解決了這個問題。

解決步驟

1.編寫node伺服器

關於node我就不做介紹了，直接看程式碼吧（寫了一個非常簡單的例子），程式碼裡面引入的有些包是不需要的請自行刪除。

//引入express框架
const express = require('express');
//路徑處理模組
const path = require('path');
const formidable = require('formidable')
const fields = require('fields')
const bodyParser = require('body-parser')
const request = require('request');
const { json } = require('body-parser');
//建立web伺服器
const app = express();

//處理引數
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
    extended: false
}))
//靜態資源訪問服務功能
app.use(express.static(path.join(__dirname, 'public')));

//攔截所有請求
/* app.use((req, res, next) => {
    //1.允許哪些客戶端訪問我
    // *代表允許所有的客戶端訪問我
    //注意:如果跨域請求中涉及到cookie資訊傳遞，值不可以為*號

    res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
    // 2.允許客戶端使用哪些請求方法訪問我
    res.header('Access-Control-Allow-Methods', 'get, post')
    //允許客戶端傳送跨域請求時攜帶cookie資訊|
    res.header('Access-Control-Allow-Credentials', true);

    next();
});
 */

//設定允許跨域訪問該服務
app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    // 2.允許客戶端使用哪些請求方法訪問我
    res.header('Access-Control-Allow-Methods', 'PUT,GET,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'X-Requested-With');
    //這兩步不能這麼寫，不然會形成覆蓋，導致json型別的傳參傳遞報錯
    // res.header('Access-Control-Allow-Headers', 'Content-Type');
    // res.header('Access-Control-Allow-Headers', 'mytoken');
    res.header('Access-Control-Allow-Headers', ['mytoken', 'Content-Type']);
    next();
})


//路由
app.get('/data', (req, res) => {
//請把url的地址換成你需要請求資料的地址
    request({ url: 'http://*******************' }, function (error, response, body) {
        //    console.log(response)
        //把請求成功後的資料傳送給客戶端
        res.send(body);
    })
});

//監聽埠
app.listen(3000);
//控制檯提示輸出
console.log('伺服器啟動成功');

使用這個方法的思路是利用node伺服器做中間人，讓node伺服器幫我們去請求資料，在成功請求到資料以後傳送給客戶端。

2.編寫客戶端請求示例

寫個簡單的例子

$.ajax({
	    url: 'http://localhost:3000/data',
	    type: 'get',
	    success: function (data) {
			console.log(data);
	    }
	})

通過上面的ajax請求就可以拿到node伺服器發給客戶端的資料了。

總結

寫部落格記錄自己在學習中遇到的問題以及解決方法我覺得這是很快樂的事情，以後回過頭看看以前自己踩過的坑看著自己一點一點進步。
希望可以幫到大家，如果我寫的地方有錯誤或者你們有更好的建議請留言或私信。我一會及時改正過來。謝謝大家。