配置代理解决跨域

自己配置代理服务器

借助http-proxy-middleware配置代理

const { createProxyMiddleware } = require('http-proxy-middleware');

app.use('/api',createProxyMiddleware({
  target:'https://www.toutiao.com',
  changeOrigin:true,
  pathRewrite:{
    '^/api':''
  }
}))

使用Nginx搭建代理服务器

打开Nginx配置文件进行编辑：

sudo vim /etc/nginx/nginx.conf

在http模块下添加以下内容：

http {
  # 其他配置...

  # 添加跨域配置
  server {
    listen 80;
    server_name example.com;

    location / {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
      add_header 'Access-Control-Allow-Headers'
        'DNT,User-Agent,X-Requested-With,If-Modified-Since,
          Cache-Control,Content-Type,Range';
      add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    }
  }
}

保存并退出配置文件。 重启Nginx

sudo service nginx restart

借助脚手架搭建服务器

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }，
  server: {
      //用来配置跨域
      host: '127.0.0.1',
      port: 8000,
      proxy: {
        '/api': {
          target: 'http://127.0.0.1:3000',//目标服务器地址
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        },
      }
    }
})