面试突击之跨域问题的解决方案详解

什么是跨域

跨域是指在浏览器上访问一个与当前页面不同来源的资源时，浏览器会拦截请求。跨域限制是为了保证用户信息和隐私的安全，防止恶意攻击。但有时候需要跨域访问，此时需要使用跨域解决方案。

常见的跨域解决方案

JSONP

JSONP是一种跨域数据交互的方式，通过动态创建script标签的方式获取数据。由于script标签的src属性没有跨域限制，因此可以通过该方式获取其他域下的数据。示例代码如下：

function handleResponse(data) {
  console.log(data)
}

const script = document.createElement('script')
script.src = 'https://example.com/data?callback=handleResponse'
document.body.appendChild(script)

请求的URL为 https://example.com/data?callback=handleResponse，其中callback参数为回调函数名称。服务端返回的数据需要用该回调函数名包装，示例代码如下：

handleResponse({"name": "John Doe"})

CORS

CORS（Cross-Origin Resource Sharing）是一种官方支持的解决跨域问题的方式。CORS 将允许服务器向不同源的页面发送和接收数据。在服务端返回数据时设置Access-Control-Allow-Origin头即可允许特定的域访问服务器的资源。示例代码如下：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/data', methods=['GET'])
def handle_request():
    data = {"name": "John Doe"}
    return jsonify(data)

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

在响应头部增加Access-Control-Allow-Origin即可实现跨域。示例代码如下：

@app.after_request
def after_request(response):
    response.headers['Access-Control-Allow-Origin'] = '*'
    return response

小结

以上是跨域问题的两种常见解决方法，JSONP适用于简单数据获取，CORS可以解决更加复杂的数据交互问题。需要注意的是，跨域可能会引起安全问题，务必谨慎处理。