Detailed explanation of the Cross-origin issue of VueJs frontend and backend separation, vuejs

Detailed explanation of the Cross-origin issue of VueJs frontend and backend separation, vuejs

Vue project built using vue-cli

You can use proxyTable in the project to solve cross-origin problems.

Set the index. js directory under config. Configure the proxyTable item to set the proxy pointing to your background address.

dev: {  env: require('./dev.env'),  port: 8085,  autoOpenBrowser: true,  assetsSubDirectory: 'static',  assetsPublicPath: '/',  proxyTable: {   '/agent': {    target: 'http://127.0.0.1:7105/',    changeOrigin: true,    pathRewrite: {     '^/agent': ''    }   }  },  // CSS Sourcemaps off by default because relative paths are "buggy"  // with this option, according to the CSS-Loader README  // (https://github.com/webpack/css-loader#sourcemaps)  // In our experience, they generally work as expected,  // just be aware of this issue when enabling this option.  cssSourceMap: false }

When the frontend uses vue-resource to initiate a request

// In main. set the public address Vue in js. prototype. rootUrl = '/agent/'; // method of sending a request on a specific page that. $ http. post (this. rootUrl + 'login', parms ). then (function (response) {// callback console after successful response. log (response) ;}, function (response) {// response error callback });

For other frontend projects, you can use nginx to start the frontend service and configure the proxy at the same time.

The following is my nginx configuration file. No matter how the front-end project is built, a dist file will be output after the build is successful, we only need to direct the nginx service directory to the entry file of your project under your dist file.

My file directory is root D: \ openplatform \ portal \ webapp \ dist; change this configuration to your directory. My file name is index.html and is a vue-cli package project, refer to the dist directory of vue-cli npm run build and point to the directory

#user nobody;worker_processes 4;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid    logs/nginx.pid;events {  worker_connections 1024;}http {  include    mime.types;  default_type application/octet-stream;  #log_format main '$remote_addr - $remote_user [$time_local] "$request" "$status" $body_bytes_sent "$http_referer" "$http_user_agent" "$http_x_forwarded_for" "$gzip_ratio" $request_time $bytes_sent $request_length';  log_format main '[$time_iso8601] [$remote_addr] [$request] [$http_user_agent] [$cookie_customerID_cookie_flag] [$args]';  access_log logs/access.log main;  sendfile    on;  #tcp_nopush   on;  #keepalive_timeout 0;  keepalive_timeout 65;  gzip on;  gzip_min_length 1k;  gzip_buffers 4 16k;  gzip_http_version 1.0;  gzip_comp_level 3;  gzip_proxied any;  gzip_types *;  server {    listen     80;    root D:\openplatform\portal\webapp\dist;    index index.html;    location / {       try_files $uri $uri/ @router;       index index.html;      }  location @router {       rewrite ^.*$ /index.html last;    }  location ^~/agent/ {      proxy_pass  http://127.0.0.1:7105/;      proxy_redirect  http://127.0.0.1:7105/ /;      proxy_set_header Host $host;      proxy_set_header X-Real-IP $remote_addr;      proxy_set_header REMOTE-HOST $remote_addr;      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;      proxy_connect_timeout 600s;      proxy_read_timeout 600s;      proxy_send_timeout 600s;    }  }  # another virtual host using mix of IP-, name-, and port-based configuration  #  #server {  #  listen    8000;  #  listen    somename:8080;  #  server_name somename alias another.alias;  #  location / {  #    root  html;  #    index index.html index.htm;  #  }  #}  # HTTPS server  #  #server {  #  listen    443 ssl;  #  server_name localhost;  #  ssl_certificate   cert.pem;  #  ssl_certificate_key cert.key;  #  ssl_session_cache  shared:SSL:1m;  #  ssl_session_timeout 5m;  #  ssl_ciphers HIGH:!aNULL:!MD5;  #  ssl_prefer_server_ciphers on;  #  location / {  #    root  html;  #    index index.html index.htm;  #  }  #}}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.