开发中如何解决跨域（前后端）_跨域是前端解决还是后端

文章目录

• 前言
• 一、跨域是什么？
• 二、如何解决跨域？
• • • • 1.1配置后端
        * 1.2 配置前端
        * 对于JsonP
• 三、Vue项目使用vue.config.js解决跨域
• • • • 3.1 项目环境版本
        * 3.2如何解决
• 总结

---

前言

我们在开发中常常会遇到这样的问题，接口在一台服务器或者一个端口上，而前端页面则在另一个服务器或者端口上。这样从前端获取接口里的数据的时候就会出现跨域问题，那么如何解决跨域问题呢？

一、跨域是什么？

跨域全称是跨域资源共享(Cross-Origin Resources Sharing,CORS)，它是游览器保护机制，只允许网页请求统一域名下的服务，同一域名指=>协议、域名、端口号都要保持一致，如果有一项不同，那么就是跨域请求。在前后端分离的项目中，解决跨域的问题，那么可以从三种方式下手。

二、如何解决跨域？

1.1配置后端

游览器是根据后端Response响应而决定的，所以配置后端是最直接的一种方法，游览器是根据Access-Control-Allow-Origin响应头而决定的，如果这个决定的是==*==，是允许所有请求，如果是一个域名，那么游览器不会对这个域名下的请求产生跨域保护，只允许指定域名的请求，根据后端语言和库的不同，配置Access-Control-Allow-Origin的方法也不同，如果使用nodejs和express，那么可以配置以下选项

如果要指定域名，可以给origin配置项指定一个字符串或者是数组，指定一个或者多个

1.2 配置前端

在前端开发环境配置代理，中转请求，因为跨域是游览器的保护机制，如果脱离了游览器，发送请求，那么就不会受到跨域白虎保护机制的影响，所以我们可以使用一个中转服务器来中转请求和接受响应，前端只需要请求这个中转服务器，并保持和中转服务器的Url一致就可以了，一般前端脚手架都支持前端代理，例如Vite,Create-React

以vite为例，在vite.config.js进行代理

对于JsonP

因为不适于Vue和React,并且也有安全隐患，这里就不做介绍了。

三、Vue项目使用vue.config.js解决跨域

3.1 项目环境版本

node     14.16.0
vue-cli  4.5.15
vue       2.x

3.2如何解决

前提项目使用vue-cli搭建的，如果不是那么修改的配置文件不一定是Vue.config.js,如果使用的是webpack环境搭建的，也可以参考这个配置，只是不一定在这个文件中去写，需要在webpack的配置文件中去找这个webpack的devServe配置项，然后去配置里面的proxy

• 项目根目录下创建vue.config.js文件
• 添加devSeve配置项，配置里面的Proxy

参考配置如下
注意：配置完一定要重启一下服务，这样才会生效哦

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
 transpileDependencies: true,
   // 下列是解决跨域问题
   devServer:{
     proxy:{
       
       '/api':{
         target:'http://movie.web-jshtml.cn',
         // 要跨域的的地址，接口对接使用
         changeOrigin:true,
         //允许跨域
         ws:false,
       },

     }
   }
})

组件中体验一下

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
   <button @click="getHandle">发请求</button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios'
export default {
 name: 'App',
 components: {
 HelloWorld
 },
 // 加载完成
 mounted(){
 axios.post('/api/getCode/')
 // 完整地址
 },
 methods:{
 getHandle(){
 console.log('发送')
 axios.post('/api/getCode/')
 }
 }
}
</script>

<style>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;


### 最后

![前15.PNG](https://img-blog.csdnimg.cn/img_convert/9bb1bdc18097214556d0a196acd5c66c.webp?x-oss-process=image/format,png)

![前16.PNG](https://img-blog.csdnimg.cn/img_convert/ea40a82e50eabfe26ee9d8b278592d39.webp?x-oss-process=image/format,png)

>由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容
>


 center;
 color: #2c3e50;


### 最后

[外链图片转存中...(img-HwAXPrYn-1719250407024)]

[外链图片转存中...(img-pd6cI2zp-1719250407026)]

>由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容
>