如何解决HTTP跨域访问异常问题？

HTTP跨域访问是指在一个域名下的网页，通过ajax等方式访问到另一个域名下的内容时，浏览器出于安全方面的考虑，会阻止这种操作导致服务端无法正常响应请求，这就是跨域访问异常问题。

以下是解决跨域访问异常问题的完整攻略：

1. JSONP解决跨域访问

JSONP是一种利用script标签的src属性允许跨域访问的方案。实现原理是：客户端动态创建script标签，src属性指向跨域接口的地址，接口返回的数据需要包裹在一个函数调用中，并写入到script标签中返回给客户端。

以下是示例：

function jsonp(url, callback) {
  const script = document.createElement('script')
  script.src = url + '&callback=' + callback
  document.appendChild(script)
}

jsonp('http://example.com/api?param1=xxx', 'callbackFunction')
function callbackFunction(data) {
  console.log('jsonp response:', data)
}

这里请求的地址为http://example.com/api?param1=xxx，服务器会返回如下格式的数据：

callbackFunction({ data: xxx })

由于script标签的src属性是不受浏览器同源策略限制的，因此客户端可以通过这种方式得到跨域接口返回的数据，并进行相关操作处理。

2. CORS解决跨域访问

CORS是指跨域资源共享，是W3C标准，是一种能让服务器支持跨域访问的技术，适用于XMLHttpRequest发起的ajax请求等。

CORS的实现需要服务端在HTTP响应头中加入如下字段：

Access-Control-Allow-Origin: 允许访问的域名
Access-Control-Allow-Credentials: 是否允许发送跨域cookie（true/false）
Access-Control-Allow-Methods: 允许请求的HTTP方法（GET/POST/PUT等）

以下是示例：

/* node.js服务器实现CORS */
const http = require('http')
const server = http.createServer((req, res) => {
  const { origin, method, headers } = req.headers
  res.setHeader('Access-Control-Allow-Origin', origin)
  res.setHeader('Access-Control-Allow-Methods', 'PUT, DELETE')
  res.setHeader('Access-Control-Allow-Credentials', 'true')
  res.writeHead(200, { 'Content-Type': 'text/plain' })
  res.end('Hello World\n')
})
server.listen(3000, () => {
  console.log('Server running at http://127.0.0.1:3000/')
})

这里的http服务器会允许所有域名的请求，支持PUT和DELETE方法，允许发送跨域cookie。

在客户端通过XMLHttpRequest进行跨域访问时，需要先发送一个OPTIONS请求来询问服务端是否允许跨域访问，如果服务端响应允许跨域访问，则再进行正常的请求操作。

/* 在客户端发起CORS请求 */
const xhr = new XMLHttpRequest()
xhr.withCredentials = true // 是否允许跨域cookie
xhr.open('PUT', 'http://example.com/api')
xhr.setRequestHeader('Content-Type', 'application/json') // 请求头中设置Content-Type
xhr.setRequestHeader('X-Csrf-Token', 'xxx') // 携带额外的请求头
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    console.log(xhr.responseText)
  }
}
xhr.send(JSON.stringify({ data: xxx })) // 发送请求

这里发送的PUT请求携带了JSON格式的数据体，额外设置了请求头Content-Type和X-Csrf-Token。服务端如果允许跨域请求，则会正常响应请求。

总结

以上就是解决HTTP跨域访问异常的两种方案，可分别根据自身业务场景选择。其中，JSONP兼容性较好，但只支持GET请求，并且需要接口配合，不安全。CORS支持跨域请求的HTTP方法，并且较为安全，但浏览器兼容性有限，需要服务端支持。