12.Vue 项目中如何解决跨域问题

1.cors

cors方案本篇文章不做过多的介绍，主要是在服务端进行配置，设置HTTP头，Access-Control-Allow-Origin响应头。

2.Proxy

代理（Proxy）也称网络代理，是一种特殊的网络服务，允许一个客户端通过这个服务器与另一个服务器进行非直接的连接，有利于保障网络终端的隐私和安全，防止攻击

方案一

如果是用的vue-cli创建的vue项目，我们可以通过webpack为我们起一个本地的服务器作为请求的代理对象，但如果项目上线时，web应用和接口不在一起仍然会跨域

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: '127.0.0.1',
    port: 8080,
    open: true, // Vue项目启动时自动打开浏览器
    proxy: {
      '/api': { // '/api'是代理标志，用于告诉node，url前面是/api的就是使用代理的
        target: 'http://xxx.xxx.xx:8081', // 目标服务器地址,
        changeOrigin: true, // 是否跨域
        pathRewrite: { // 把实际url地址中的'/api'替换成''
          '^/api': ''
        }
      }
    }
  }
})

配置基地址 

 axios.defaults.baseURL = '/api'

 

方案二

此外还可以通过服务端实现代理请求转发

以express为例

var express = require('express');
 const proxy = require('http-proxy-middleware')
 const app = express()
 app.use(express.static(__dirname + '/'))
 app.use('/api', proxy({ target: 'http://localhost:4000', changeOrigin: false}));
 module.exports = app

 方案三

配置nginx实现代理

server {
    listen 80;
    # server_name www.josephxia.com;
    location / {
        root  /var/www/html;
        index  index.html index.htm;
        try_files $uri $uri / /index.html;
    }
    location / api {
        proxy_pass  http://127.0.0.1:3000;
        proxy_redirect off;
        proxy_set_header  Host $host;      
        proxy_set_header  X - Real - IP $remote_addr;
        proxy_set_header  X - Forwarded - For  $proxy_add_x_forwarded_for;
    }
}