解决 jquery使用ajax请求发生跨域问题的办法

问题描述

我在使用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服务器发给客户端的数据了。

总结

写博客记录自己在学习中遇到的问题以及解决方法我觉得这是很快乐的事情，以后回过头看看以前自己踩过的坑看着自己一点一点进步。
希望可以帮到大家，如果我写的地方有错误或者你们有更好的建议请留言或私信。我一会及时改正过来。谢谢大家。