前端跨域问题之自我总结笔记

前端

2023-10-02 02:44:34

前端跨域问题

同源策略与跨域

在开始讨论跨域问题之前，我们需要先了解同源策略和跨域的概念。

同源策略（Same-Origin Policy） ：同源策略是浏览器的一项安全机制，它限制了不同源的页面之间的通信。同源是指在协议、域名和端口号都相同的情况下，两个页面被认为是同源的。例如，http://example.com:8080/index.html 和 http://example.com:8080/about.html 是同源的，而 http://www.example.com:8080/index.html 和 http://example.com:8080/index.html 不是同源的。
跨域（Cross-Origin） ：跨域是指访问不同源的资源，例如，一个页面试图访问另一个域名的资源，或者一个页面试图通过 JavaScript 调用另一个域名的函数。

跨域问题成因

跨域问题是由浏览器的同源策略 造成的。浏览器出于安全考虑，限制了不同源的页面之间的通信，以防止恶意网站攻击用户数据或执行恶意操作。

跨域解决方法

1. CORS（跨域资源共享）

CORS（Cross-Origin Resource Sharing）是一种机制，它允许浏览器跨域访问资源。CORS通过在HTTP请求中添加额外的请求头来实现跨域访问。

在服务器端，需要配置CORS响应头，以便浏览器允许跨域请求。CORS响应头包括：

Access-Control-Allow-Origin：指定哪些源可以跨域访问该资源。
Access-Control-Allow-Methods：指定允许哪些HTTP方法（如GET、POST、PUT、DELETE等）可以跨域访问该资源。
Access-Control-Allow-Headers：指定允许哪些HTTP头可以跨域访问该资源。
Access-Control-Max-Age：指定跨域请求的预检（preflight）请求结果的有效期。

2. JSONP（JSON with Padding）

JSONP（JSON with Padding）是一种解决跨域问题的技术，它利用了 <script> 标签可以跨域加载资源的特点。JSONP的工作原理是将数据以JSON格式封装在一个函数调用中，然后通过 <script> 标签加载这个函数。这样，浏览器就会跨域加载这个函数，并执行函数中的代码，从而获取数据。

3. 服务端代理

服务端代理是一种解决跨域问题的技术，它通过在服务器端搭建一个代理服务器来实现跨域访问。客户端向代理服务器发送请求，代理服务器再将请求转发到目标服务器，并返回目标服务器的响应给客户端。这样，客户端就可以跨域访问目标服务器的资源。

实例与代码示例

CORS 实例

在服务器端，可以使用以下代码配置 CORS 响应头：

// Node.js 示例
const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

// Python 示例
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/v1/data')
def get_data():
  data = {'name': 'John Doe', 'age': 30}
  return jsonify(data), 200

if __name__ == '__main__':
  app.run()

在客户端，可以使用以下代码发送 CORS 请求：

// JavaScript 示例
const fetch = require('node-fetch');

fetch('https://example.com/api/v1/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

JSONP 实例

在服务器端，可以使用以下代码生成 JSONP 响应：

// Node.js 示例
const express = require('express');
const app = express();

app.get('/api/v1/data', (req, res) => {
  const data = {'name': 'John Doe', 'age': 30};
  const callback = req.query.callback;
  res.send(`${callback}(${JSON.stringify(data)})`);
});

// Python 示例
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/v1/data')
def get_data():
  data = {'name': 'John Doe', 'age': 30}
  callback = request.args.get('callback')
  return jsonify(data), 200

if __name__ == '__main__':
  app.run()

在客户端，可以使用以下代码发送 JSONP 请求：

// JavaScript 示例
const fetch = require('node-fetch');

function jsonpCallback(data) {
  console.log(data);
}

fetch('https://example.com/api/v1/data?callback=jsonpCallback')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

服务端代理实例

在服务器端，可以使用以下代码搭建一个代理服务器：

// Node.js 示例
const express = require('express');
const axios = require('axios');

const app = express();

app.get('/api/v1/data', (req, res) => {
  axios.get('https://target.example.com/api/v1/data')
  .then(response => {
    res.send(response.data);
  })
  .catch(err => {
    res.status(500).send(err.message);
  });
});

// Python 示例
from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/v1/data')
def get_data():
  url = 'https://target.example.com/api/v1/data'
  response = requests.get(url)
  if response.status_code == 200:
    return jsonify(response.json())
  else:
    return jsonify({'error': 'Failed to fetch data'}), 500

if __name__ == '__main__':
  app.run()

在客户端，可以使用以下代码通过代理服务器发送请求：

// JavaScript 示例
const fetch = require('node-fetch');

fetch('http://localhost:3000/api/v1/data')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));