手机网站开发 和 网页,沧州分销系统制作,建设网站群的指导思想,西安网页设计跨域问题#xff1a;
是由浏览器的同源策略引起的#xff0c;同源策略是一种安全策略#xff0c;用于防止一个网站访问其他网站的数据。
同源是指协议、域名和端口号都相同。
跨域问题常常出现在前端项目中#xff0c;当浏览器中的前端代码尝试从不同的域名、端口或协议…
跨域问题
是由浏览器的同源策略引起的同源策略是一种安全策略用于防止一个网站访问其他网站的数据。
同源是指协议、域名和端口号都相同。
跨域问题常常出现在前端项目中当浏览器中的前端代码尝试从不同的域名、端口或协议发出请求时浏览器会因为同源策略而拒绝该请求。
为了解决跨域问题可以通过配置代理来绕过浏览器的同源策略。
具体来说可以在前端项目的配置中设置代理规则将某些请求路径转发到同源的后端服务器。
例如
基于vue项目来说
可以在request.js配置baseURL的值为/api
request.js:
//定制请求的实例//导入axios npm install axios
import axios from axios;
//定义一个变量,记录公共的前缀 , baseURL
const baseURL /api;
const instance axios.create({baseURL})//添加响应拦截器
instance.interceptors.response.use(result{return result.data;},err{alert(服务异常);return Promise.reject(err);//异步的状态转化成失败的状态}
)export default instance;
在vite.config.js里面配置代理:
其实就是将原来的浏览器的http://127.0.0.1:5174/api替换成了http://localhost:8080
这样就解决了跨域的问题 代理的原理是将前端的请求发送到同源的后端服务器由后端服务器再发送到目标服务器并将响应返回给前端。这样前端代码实际上是与同源的后端服务器进行通信而不是与目标服务器直接通信从而避免了跨域问题。
vite.config.js
import { fileURLToPath, URL } from node:urlimport { 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: {proxy: {/api: {// 代理路径target: http://localhost:8080,// 目标地址changeOrigin: true,// 是否允许跨域rewrite: (path) path.replace(/^\/api/, )// 重写路径}}}
})
