前端ajax跨域问题及基于node的跨域解决方案

最新推荐文章于 2024-04-05 17:55:08 发布

意夏

最新推荐文章于 2024-04-05 17:55:08 发布

阅读量513

点赞数

分类专栏： node 文章标签：前端跨域 ajax node解决跨域的方案

本文链接：https://blog.csdn.net/weixin_45014444/article/details/96734242

版权

node 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

跨域的概念及产生

概念
跨域：跨域名（网址）访问；
报错显示：No ‘Access-Control-Allow-Origin’

浏览器的同源策略
（1）浏览器的同源策略：同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。受到请求的 URL 的域必须与当前 Web 页面的域相同；
（2）同源策略是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响；

产生跨域原因
产生跨域的原因：就是浏览器的同源策略；
总结：端口不同，域名不同，协议不同，都会出现跨域

解决方案：
（1）html5新增一个XHR2对象，xhr2：服务器端的头部添加下面两行代码即可。( 但是存在兼容问题 )----加在后端文件里

header(‘Access-Control-Allow-Origin:*’);
header(‘Access-Control-Allow-Method:POST,GET’);

（2）jsonp(json with padding)----前端常用的
要求：数据必须是jsonp格式。
JSONP(JSON with Padding)是一个非官方的协议，通过javascript callback（回调函数）的形式实现跨域访问，由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求(script标签不存在跨域问题，利用它来加载文件)，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

（3）后端代理（后端不存在跨域）
后端解决跨域问题有常用方式：
☆ 设置请求头

const express = require('express');
const app = express();
const host = 'localhost';
const port = 2000;

app.get('/people', function(req, res, next) {
        res.setHeader('Access-Control-Allow-Origin', '*')//设置请求头
        res.json({
            name: 'lisi',
            class: 1905,
            age: 12,
            sex: 'nan'
        })
    })
    // 创建api服务器，并监听这个服务器
app.listen(port, host, function() {
    console.log(The server is running at http://${host}:${port})
})

直接点击在终端执行输出的地址，跳转到浏览器页面，在搜索栏后面加上自己设置的路径，如此处的/people，获得数据

☆ 使用中间件，利用第三方的包 cors

const express = require('express');
const cors = require('cors');
const app = express();// 得到一个app对象
const host = 'localhost';
const port = 1000;
// 创建接口
app.use(cors({
    "origin": "*",
    "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
    "preflightContinue": false,
    "optionsSuccessStatus": 200
}))

app.get('/person', function(req, res, next) { // 回调函数我们称之为： 中间件   具有特定功能的一个函数
    res.json({
        name: 'zhangsan',
        age: 10,
        class: 1905,
        sex: 'nan'
    })
})
// 创建api服务器，并监听这个服务器
app.listen(port, host, () => {
    console.log(The server is running at http://${host}:${port})
})

前端页面直接用ajax请求数据，直接预览前端页面，不存在跨域问题；

或者直接点击在终端执行输出的地址，跳转到浏览器页面，在搜索栏后面加上自己设置的路径，如此处的/person，获得数据。

☆ 反向代理的基本原理

后端帮助我们请求数据，再将数据发送给我们自己前端
任务：
1. 后端请求数据
2. 将数据发送给前端 api服务器（利用express模块构建api服务器）

const request = require('request');
const express = require('express');
const app = express();
const host = 'localhost';
const port = 3000;
const url = 'http://api.k780.com/?app=weather.city&cou=1&appkey=43932&sign=59ee2dde1ef29a707433a87f133a3559&format=json'
    //创建接口
app.get('/data', (req, res, next) => {
        res.setHeader('Access-Control-Allow-Origin', '*'); //设置请求头解决跨域
        //数据请求
        request(url, (error, response, body) => {
            res.json(JSON.parse(body))
        })
    })
    //建立api服务器，并监听
app.listen(port, host, () => {
    console.log(The server is running at:http://${host}:${port})
})

点击终端生成的地址，跳转到浏览器，在搜索栏输入地址，此处的是/data，前端直接拿接口获取数据即可