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

文章目录

前言

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

一、跨域是什么？

跨域全称是跨域资源共享(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 项目环境版本

node14.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><divid="app"><imgalt="Vue logo"src="./assets/logo.png"><button@click="getHandle">发请求</button></div></template><script>import HelloWorld from'./components/HelloWorld.vue'import axios from'axios'exportdefault{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;margin-top: 60px;}button{display: block;margin: auto;}</style>

重写地址=>替换掉

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

<template><divid="app"><imgalt="Vue logo"src="./assets/logo.png"><button@click="getHandle">发请求</button></div></template><script>import HelloWorld from'./components/HelloWorld.vue'import axios from'axios'exportdefault{name:'App',components:{
    HelloWorld
  },// 加载完成mounted(){
    axios.post('/user/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;margin-top: 60px;}button{display: block;margin: auto;}</style>

这样就ok了

总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见