当前位置: 代码迷 >> 综合 >> 前端配置跨域(代理服务器)
  详细解决方案

前端配置跨域(代理服务器)

热度:75   发布时间:2023-12-05 01:32:53.0

方法一: 

配置vue.config.js文件 

vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写

在项目下配置vue.config.js文件

在vue.config.js文件里输入

module.exports = {devServer: {proxy: {"/api": { //自定义target: "http://你的服务器地址/api", //这里可以跟随项目实际部署服务器来changeOrigin: true,ws: true,pathRewrite: {"^/api": ""//自定义}}}}
}

 

 方式二:

  使用JSONP跨域

        jsonp原理就是利用<script>标签没有跨域限制,通过<script>标签的src属性,发送带有callback参数,服务端将接口返回数据拼凑到callback函数中,返回给浏览器,浏览器解析执行,从而前端拿到callback函数返回的数据。

 <script>var script = document.createElement('script');script.type = 'text/javascript';// 传参一个回调函数名给后端,方便后端返回时执行这个在前端定义的回调函数script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';document.head.appendChild(script);// 回调执行函数function handleCallback(res) {alert(JSON.stringify(res));}</script>