vue项目之跨域解决方案

拼搏现实的明天。 2023-03-12 09:26 7阅读 0赞

## 跨域常见解决方案 ##

*  `jsonp` (项目基本不用)

原理：动态生成script标签，通过src属性加载
    缺点：不支持POST请求，支持get请求
    应用场景：有些第三方数据接口可能会使用jsonp解决跨域问题，工作中不怎么用。

*  中间服务器代理

A前端部署地址：127.0.0.1：8000
    B中间服务器：127.0.0.1：8000
    C目标服务器地址：127.0.0.1：8888
    
    因为浏览器的同源策略，A 和 c 存在跨域问题，A 无法访问 服务器c
    解决：因为跨域问题仅存在于浏览器（**服务器请求服务器的数据，没有跨域问题**），所以后台可以搭建中间服务器
    让服务器B请求服务器c，然后将数据返回给前端A.

*  `CORS`跨域资源共享，服务器端进行配置，( **后端开发人员设置** )加一个响应头（**工作中常用**）

res.header("Access-Control-Allow-Origin","*")

*  `vue.config.js` `vue反向代理` ( **前端开发人员设置** )

module.exports = { 
        lintOnSave: false,
        devServer: { 
            // 设置代理
            proxy: { 
                "/api": { 
                    target: "http://127.0.0.1:8888/api/private/v1", // 域名
                    ws: true, // 是否启用websockets
                    changOrigin: true, // 开启代理：在本地会创建一个虚假服务器，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                    pathRewrite: {      // 路径重写：将 /api 替换为 / 
                        "^/api": "/"
                    }
                }
            }
        }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目如何解决跨域问题

[跨域是什么][Link 1] 跨域本质是浏览器基于同源策略的一种安全手段同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能

淡淡的烟草味﹌/ 2024年03月27日 14:08/ 0 赞/ 68 阅读

相关 vue跨域解决方案

第一种： proxyTableproxyTable是解决开发环境中的跨域问题，正式环境的跨域需要使用nginx反向代理或者是后端解决 proxyTable: {

短命女/ 2023年06月15日 11:12/ 0 赞/ 8 阅读

相关 vue项目之跨域解决方案

跨域常见解决方案 `jsonp` (项目基本不用) 原理：动态生成script标签，通过src属性加载缺点：不支持POST请求，支持get请求

拼搏现实的明天。/ 2023年03月12日 09:26/ 0 赞/ 8 阅读

相关 vue解决跨域

在vue根目录下创建出vue.config.js 写入如下代码以百度为例 module.exports = { devServer: {

以你之姓@/ 2023年02月22日 13:58/ 0 赞/ 6 阅读

相关 vue跨域解决方案（marksheng）

可以在Vue项目 config文件夹下的index.js找到proxyTable并设置如下代码 proxyTable: { "/api":{

爱被打了一巴掌/ 2023年01月03日 01:21/ 0 赞/ 138 阅读

相关 VUE之axios解决跨域方案

跨域示例 ![在这里插入图片描述][20200807172647824.png] Access to XMLHttpRequest at ‘xxxx’ from or

古城微笑少年丶/ 2022年11月25日 10:05/ 0 赞/ 207 阅读

相关前端跨域解决方案(vue/nginx)

一、vue 之前解决跨域问题，分别都是在前端加上一些header头，后端设置一些access...的信息，允许固定ip或者所有的请求，但还没有全部在前端搞定的方案，最近在用v

落日映苍穹つ/ 2022年01月27日 10:01/ 0 赞/ 327 阅读

相关跨域解决方案（Spring项目）

1.注入配置文件 @Configuration public class CorsConfig { private CorsConfigura

ゝ一世哀愁。/ 2021年10月09日 07:44/ 0 赞/ 318 阅读

相关 Vue-cli3之axios跨域问题解决方案（客户端跨域）

最权威的配置参考官方文档：[https://cli.vuejs.org/zh/config/][https_cli.vuejs.org_zh_config] vue.

浅浅的花香味﹌/ 2021年09月17日 18:38/ 0 赞/ 370 阅读

相关 VUE项目之跨域问题

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小咪咪/ 2021年09月17日 08:28/ 0 赞/ 362 阅读