前端学习

跨域处理

# VUE项目中的跨域问题

在vue.config.js文件中配置：

    devServer: {
        open: false,
        // disableHostCheck: true,   #vue3可以使用
        allowedHosts: 'all',
        port: 8081, // 端口
        proxy: {
            '/api': {
                target: 'https://baseurl1', //baseurl
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            },
            '/sdk': {
                target: 'https://baseurl2',  
                changeOrigin: true,
                pathRewrite: {
                    '^/sdk': '/'
                }
            },
            '/pass': {
                target: 'https://baseurl3',  
                changeOrigin: true,
                pathRewrite: {
                    '^/passport': '/'
                }
            }
        },
    }

vue运行后，端口总是改变的问题

vue.config.js文件中设置了port，每次run后仍会端口发生改变

原因：指定端口被占用，需要杀掉对应进程

问题： “Invalid Host header”

本地起服务没有问题

服务器起服务，用ip+端口访问，也没有问题

将ip+端口 对应成域名后，域名访问报错：Invalid Host header

前提： vue cli5

在vue.config.js中配置：allowedHosts: 'all';

参考

参考

界面展示接口返回，期望json格式化

参考

select下拉列表既可以选择又可以输入

添加属性：filterable allow-create default-first-option

<el-select
v-model="formInline.src_img"
placeholder="选择或输入图片url"
class="form_select"
filterable
allow-create
default-first-option
clearable
>

参考

vue返回的内容不换行

<pre><p v-html="url_show"></p></pre>

参考