已解决：No ‘Access-Control-Allow-Origin’跨域问题

下面我将详细讲解如何解决 “No 'Access-Control-Allow-Origin'跨域问题”的完整攻略。

什么是跨域问题？

在浏览器端，当一个网页的代码试图在与当前网页不同的域名、协议、端口上请求数据时，就会引发浏览器的跨域安全机制。比如，网站A在浏览器端试图请求网站B的数据，由于不同源，就会被浏览器拦截。

如何解决跨域问题？

在解决跨域问题时，我们可以通过以下几种方法来实现：

1. 使用后端代理解决跨域问题

后端代理是指在服务端代为向目标服务器发起请求，再将结果返回到前端，从而实现跨域请求。我们可以使用Node.js的express框架来实现后端代理，具体操作流程如下：

• 安装express模块：在命令行中输入命令 npm install express 进行安装
• 编辑app.js：在app.js中添加如下代码来发起代理请求

const express = require('express')
const request = require('request')
const app = express()

app.use('/', (req, res) => {
  const options = {
    method: req.method,
    url: '目标地址',
    headers: req.headers,
    body: req.body
  }
  request(options, (error, response, body) => {
    if (!error && response.statusCode === 200) {
      res.send(body)
    } else {
      res.status(500).send(error)
    }
  })
})

app.listen(3000, () => console.log('Example app listening on port 3000!'))

2. 使用JSONP解决跨域问题

JSONP是利用script标签可以跨域请求资源的特性来实现跨域请求。我们可以在请求URL中添加一个回调函数的参数，然后服务器返回该函数的调用，从而将数据传回客户端。

示例代码如下：

function jsonp(url, callback) {
  const script = document.createElement('script')
  script.src = url
  script.onload = () => {
    script.remove()
  }
  document.body.appendChild(script)

  window[callback] = (data) => {
    callback(data)
  }
}

3. 使用CORS解决跨域问题

CORS是一种标准的跨域解决方案，它允许浏览器向跨域服务器发起请求，并接受服务器返回的数据。我们可以在服务器端设置响应头来实现CORS。

示例代码如下：

const http = require('http')

const server = http.createServer((req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,DELETE')

  if (req.method === 'GET') {
    res.end('GET请求')
  } else if (req.method === 'POST') {
    res.end('POST请求')
  } else if (req.method === 'DELETE') {
    res.end('DELETE请求')
  }
})

server.listen(3000, () => console.log('server listening on port 3000!'))

通过以上三种方式，我们就可以解决跨域问题啦。不同的场景下，我们可以根据实际需要选择合适的解决方案。