vue 中跨域解决方式

Vue 中跨域解决方式有以下几种：

1. 通过服务端配置 CORS（跨域资源共享）：在服务端的响应头中设置 `Access-Control-Allow-Origin` 字段，允许指定的域名进行跨域访问。这种方式需要服务端的支持，如果你是自己搭建的服务端，可以参考以下示例代码：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api')
def api():
    response = jsonify({'hello': 'world'})
    # 允许指定的域名进行跨域访问
    response.headers['Access-Control-Allow-Origin'] = 'http://localhost:8080'
    return response

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

2. 通过代理解决跨域问题：在 Vue 的 `config/index.js` 中配置代理，将请求转发到本地的服务端，再由服务端进行真正的请求。这种方式不需要服务端的支持，但需要在本地搭建一个服务端。示例代码如下：

module.exports = {
  dev: {
    proxyTable: {
      '/api': {
        target: 'http://localhost:5000', // 本地的服务端地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api' // 将请求的 /api 前缀转发到本地的 /api 路径
        }
      }
    }
  }
}

3. JSONP（JSON with Padding）跨域：通过动态创建 `script` 标签来访问服务端接口，服务端返回的数据需要用一个函数包裹，以便在客户端中执行。这种方式只支持 GET 请求，并且需要服务端的支持。示例代码如下：

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

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

4. WebSocket 跨域：通过 WebSocket 协议进行双向通信，不受同源策略的限制。这种方式需要服务端的支持，并且需要在客户端和服务端都进行相应的配置。示例代码如下：

const socket = new WebSocket('ws://example.com/socket')
socket.onopen = function(event) {
  console.log('WebSocket 已连接！')
  socket.send('Hello WebSocket!')
}
socket.onmessage = function(event) {
  console.log('收到消息：', event.data)
}
socket.onclose = function(event) {
  console.log('WebSocket 已关闭！')
}

以上是 Vue 中跨域解决方式的一些常见示例，具体的解决方案需要根据实际情况进行选择。